afirdousi

:host {
  background-color: #ffffe5;
  border:1px solid red;
  padding:10px;
}

div {
  border-bottom:1px solid red;
  display:inline-block;

afirdousi

:host {
  background-color: #ffffe5;
  border:1px solid red;
  padding:10px;
}

div {
  border-bottom:1px solid red;
  display:inline-block;

afirdousi

:host {
  background-color: #ffffe5;
  border:1px solid red;
  padding:10px;
}

div {
  border-bottom:1px solid red;
  display:inline-block;

afirdousi

import {
          Component, 
          Input, 
          ContentChild, 
          AfterContentInit 
        } 
from '@angular/core';

@Component({
  selector: 'my-custom-input',

afirdousi

<my-custom-input [label]="'Name'">
    <input #input type="text">
</my-custom-input>

<my-custom-input [label]="'Password'">
    <input #input type="password">
</my-custom-input>

 <my-custom-input [label]="'Number'">
    <input #input type="date">

afirdousi

import { Directive } from '@angular/core';

@Directive({
  selector:'my-custom-input input'
})
export class InputReference {
  
}

afirdousi

@Component({
  selector: 'my-custom-input',
  templateUrl: 'src/my-custom-input.component.html',
  styleUrls:['src/my-custom-input.component.css']
})
export class MyCustomInput implements AfterContentInit {

  @Input() label;
  
  @ContentChild(InputReference) // not using 'input' selector here

afirdousi

import { Directive, HostListener } from '@angular/core';

@Directive({
  selector:'my-custom-input input'
})
export class InputReference {

  @HostListener('focus')
  onFocus(){

afirdousi

:host {

  padding:10px;
  border: 1px solid #d3d3d3;
}

div {

  display:inline-block;
  

afirdousi

:host {

  padding:10px;
  border: 1px solid #d3d3d3;
}

:host(.input-focus){
  outline:none;
  border:1px solid #4d90fe;
  -webkit-box-shadow:0 0 5px #4d90fe;