1-Create a component (field-search.component.ts)
import { Component } from '@angular/core';
@Component({
selector: 'my-campo-busca',
templateUrl: './campo-busca.component.html',
styleUrls: ['./campo-busca.component.css']
})
export class CampoBuscaComponent {
constructor() { }
}
2-Define component html (field-search.component.html)
<input type="text"...
3- Declare the component in the application module (app.module.ts)
import { CampoBuscaComponent } from 'campo-busca.component.ts';
@NgModule({
declarations: [ CampoBuscaComponent ]
})
4-Use in html:
<my-campo-busca></my-campo-busca>
Good practice is to use the prefix my to distinguish between native and angular components.
Worth a look at convention of nomenclature and height of the angular
*I have a code at angle 4 on the github that I use with angular cli.
If you want you can clone and parse the code. You only need to install angular cli first with the command:
npm install @angular/cli -g
And then ng serve --open
to open
https://github.com/Marcelo-Rodrigues/ng-architect