How to create custom input component with ngModel working in angular 6?

Question

Since I use inputs with a lot of the same directives and .css classes applyed, I want to extract the repeated code to some component like this:

  @Component(         


        

Answer 1

You can use @Input directive for passing the externalValue into the component and binding with it.

Here's a code:

  @Component({
  selector: "app-input",
  template: `
    

      
      ...
    
  `,
  })

  export class InputComponent implements OnInit {
     @Input('externalValue') externalValue : any;
  }

And in your parent component, you can use it like: