Angular 2 - Creation of Components (Tags)

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 - Set the 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 no html:

<my-campo-busca></my-campo-busca>

As a good practice one should use the prefix my, to distinguish it from the native angular components.

It's worth taking a look at naming convention and angular stature

* I have an angle 4 code in github that I use with angle cli.

If you want you can clone and parse the code. You only need to install the angle cli before with the command:

npm install @angular/cli -g

And then ng serve --open to open

link