Angular 4 Components By HACKVEDA
In Angular, components are where you will likely spend the bulk of time when developing your application. Angular 4 components are simply classes that are designated as a component with the help of a component decorator.
Angular-cli has a command to create your own component. However, the app component which is created by default will always remain the parent and the next components created will form the child components.
Let us now run the command to create the component.

- ng invokes the Angular CLI
- g is short for generate.
- component is the type of element you’re about to generate.
- and then the component name
The following files are created in the new-cmp folder −
- new-cmp.component.css − css file for the new component is created.
- new-cmp.component.html − html file is created.
- new-cmp.component.ts − here, we can define the module, properties, etc.

First import the component inside the
app.module.ts fileand then include it in thedeclarationssection. Here is how it looks after adding the

The new-cmp.component.ts file is generated as follows −

it creates a new class called NewCmpComponent, which implements OnInit.In, which has a constructor and a method called ngOnInit(). ngOnInit is called by default when the class is executed.
When we hit the url in the http://localhost:4200/ browser, it first executes the index.html file

Angular core is imported and referred as the Component and the same is used in the Declarator. In the declarator reference to the selector, templateUrl and styleUrl are given. The selector is the tag which is placed in the index.html file. The class AppComponent has a variable called title, which is displayed in the browser.

The @Component uses the templateUrl called app.component.html which is as follows

app.module.ts has a reference to the new component created.
Let us now check the new files created in new-cmp.

The .html called new-cmp.component.html. We have the html code, i.e., the p tag. The style file is empty as we do not need any styling at present.
The selector, i.e., app-new-cmp needs to be added in the app.component .html file as follows −

When the <app-new-cmp></app-new-cmp> tag is added, all that is present in the .html file of the new component created will get displayed on the browser along with the parent component data.

In the class, we have added one variable called new component and the value is “Entered in new component created”.
The above variable is bound in the .new-cmp.component.html file as follows −

Now since we have included the <app-new-cmp></app-new-cmp>selector in the app. component .html which is the .html of the parent component, the content present in the new component .html file (new-cmp.component.html) gets displayed on the browser as follows −

