Content Projection

01.ts

@Component({
  selector: 'app-root',
  template: `

    <h1>FA Input</h1>

    <fa-input icon="envelope" (value)="onNewValue($event)"></fa-input>
    
    <fa-input icon="lock" (value)="onNewValue($event)"></fa-input>
  `
})
export class AppComponent {
  onNewValue(val) {
    console.log(val);
  }
}

02.ts

@Component({
  selector: 'fa-input',
  template: `
    <i class="fa" [ngClass]="classes"></i>
    <input (focus)="inputFocus = true" (blur)="inputFocus = false"
           (keyup)="value.emit(input.value)" #input>
  `,
styleUrls: ['./fa-input.component.css']
})
export class FaInputComponent {
  @Input() icon: string;
  @Output() value = new EventEmitter<string>();
  inputFocus = false;

  get classes() {
    const cssClasses = {
      fa: true
    };
    cssClasses['fa-' + this.icon] = true;
    return cssClasses;
  }

  @HostBinding('class.focus')
  get focus() {
    console.log(this.inputFocus);
    return this.inputFocus;
  }
}
      

03.css

:host {
  border: 1px solid grey;
}

input {
  border: none;
  outline: none;
}

:host(.focus) {
  border: 1px solid blue;
}

04.html

<input type="email"  autocomplete="off" placeholder='Email'>

05.ts

@Component({
  selector: 'fa-input',
  template: `
    <i class="fa" [ngClass]="classes"></i>
    <input (focus)="inputFocus = true" (blur)="inputFocus = false"
           (keyup)="value.emit(input.value)" #input 
           [placeholder]="placeholder"
           [type]="type",
           [autocomplete]="autocomplete">
  `
})
export class FaInputComponent {
...
    @Input() placeholder:string;
    @Input() type:string;
    @Input() autocomplete:string;
...
}

06.ts

@Component({
  selector: 'app-root',
  template: `

    <h1>FA Input</h1>

    <fa-input icon="envelope">   

      <input type="email" placeholder="Email">

    </fa-input>  
`})
export class AppComponent {
  
}
      

07.html

<select>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>

<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

08.ts

@Component({
  selector: 'fa-input',
  template: `

    <i class="fa" [ngClass]="classes"></i>

    <ng-content></ng-content>

  `,
  styleUrls: ['./fa-input.component.css']
})
export class FaInputComponent {

  @Input() icon: string;

  get classes() {
    const cssClasses = {
      fa: true
    };
    cssClasses['fa-' + this.icon] = true;
    return cssClasses;
  }
}

09.css

:host ::ng-deep input {
  border: none;
  outline: none;
}

10.css

input {
  border: none;
  outline: none;
}

11.css

input[_ngcontent-c0] {
  border: none;
  outline: none;
}

12.html

<fa-input icon="envelope" _nghost-c0="">

    <i _ngcontent-c0="" class="fa fa-envelope"></i>
  
    <input placeholder="Email" type="email">

</fa-input>

14.css

[_nghost-c0] input {
    border: none;
    outline: none;
}

15.ts

@Directive({
  selector: '[inputRef]'
})
export class InputRefDirective {
  focus = false;

  @HostListener("focus")
  onFocus() {
    this.focus = true;
  }

  @HostListener("blur")
  onBlur() {
    this.focus = false;
  }
}

16.html

    <h1>FA Input</h1>

    <fa-input icon="envelope">   

      <input inputRef type="email" placeholder="Email">

    </fa-input> 

17.ts

@Component({
  selector: 'fa-input',
  template: `
    <i class="fa" [ngClass]="classes"></i>
    <ng-content></ng-content>
  `,
  styleUrls: ['./fa-input.component.css']
})
export class FaInputComponent {

  @Input() icon: string;

  @ContentChild(InputRefDirective)
  input: InputRefDirective;

  @HostBinding("class.focus")
  get focus() {
    return this.input ? this.input.focus : false;
  }

  get  classes() {
    const cssClasses = {
      fa: true
    };
    cssClasses['fa-' + this.icon] = true;
    return cssClasses;
  }
}

18.html

<fa-input icon="envelope">

  <i class="fa fa-envelope"></i>

  <input inputRef type="email" placeholder="Email">

</fa-input>

19.ts

@Component({
  selector: 'fa-input',
  template: `

    <ng-content select="i"></ng-content>

    <ng-content select="input"></ng-content>

  `})
export class FaInputComponent {
   ...
}

20.ts

<ng-content select="input.test-class"></ng-content>

21.ts

@Component({
  selector: 'fa-input',
  template: `

    <ng-content select="i"></ng-content>

    <ng-content></ng-content>

  `})
export class FaInputComponent {
   ...
}

   

22.css

:host {
  border: 1px solid grey;
}

input {
  border: none;
  outline: none;
}

:host(.focus) {
  border: 1px solid blue;
}

22.ts

:host {
  border: 1px solid grey;
}

input {
  border: none;
  outline: none;
}

:host(.focus) {
  border: 1px solid blue;
}