Angular7 Components

Angular7 Components

The file structure has the application component and is composed of the following files –

1. app.component.css
2. app.component.html
3. app.component.spec.ts
4. app.component.ts
5. app.module.ts

And if you have selected angular routing during the setup of your project, routing files will also be added and the files will be as follows.

1. app-routing.module.ts

The files above are created by default when we use the angular-cli command to create new project.

If you open the app.module.ts file, it will have some imported libraries and also a declarative assigned as follows to the app component.

import { BrowserModule } from '@angular/platform-browser'; 
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module'; 
import { AppComponent } from './app.component';

@NgModule({ 
   declarations: [ 
      AppComponent 
   ], 
   imports: [ 
      BrowserModule, 
      AppRoutingModule 
   ], 
   providers: [],
   bootstrap: [AppComponent] 
})
export class AppModule { }

The declarations include the variable AppComponent, which we have imported already. It is the component of parenting.

Now angular-cli has a command to create a component of your own. However, the app component that is created by default will still remain the parent, and the next created components will form the components of the child.

Now execute the command to build the component with the code line below –

ng g component new-cmp

When you execute the above command in the command line, the following output is given –

C:\projectA7\angular7-app>ng g component new-cmp 
CREATE src/app/new-cmp/new-cmp.component.html (26 bytes) 
CREATE src/app/new-cmp/new-cmp.component.spec.ts (629 bytes) 
CREATE src/app/new-cmp/new-cmp.component.ts (272 bytes) 
CREATE src/app/new-cmp/new-cmp.component.css (0 bytes) 
UPDATE src/app/app.module.ts (477 bytes)

Now, if we go and test the structure of the file, we will get the new-cmp folder created under the folder src / app.

The following files are created in the folder new-cmp

• New-cmp.component.css − Css file is generated for the new feature.
• New-cmp.component.html − Creates html file.
• New-cmp.component.spec.ts − May be used to test units.
• New-cmp.component.ts − The element, properties, etc. can be described here.

The file app.module.ts will have changes made as follows –

import { BrowserModule } from '@angular/platform-browser'; 
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module'; 
import { AppComponent } from './app.component'; 
import { NewCmpComponent } from './new-cmp/new-cmp.component'; 

// includes the new-cmp component we created
@NgModule({ 
   declarations: [
      AppComponent, 
      NewCmpComponent 
      // here it is added in declarations and will behave as a child component 
   ], 
   imports: [ 
      BrowserModule,
            AppRoutingModule 
   ], 
   providers: [], 
      bootstrap: [AppComponent] 
      //for bootstrap the AppComponent the main app component is given. 
}) 
export class AppModule { }

This creates the new-cmp.component.ts file as follows −,

import { Component, OnInit } from '@angular/core'; // here angular/core is imported.

@Component({ 
   // this is a declarator which starts with @ sign. 
   // The component word marked in bold needs to be the same. 
   selector: 'app-new-cmp', // selector to be used inside .html file. 
   templateUrl: './new-cmp.component.html', 
   // reference to the html file created in the new component. 
   styleUrls: ['./new-cmp.component.css'] // reference to the style file. 
}) 
export class NewCmpComponent implements OnInit {   
   constructor() { } 
   ngOnInit() { } 
}

If you see the new-cmp.component.ts file above, it will create a new class called NewCmpComponent, which will implement OnInit in which a constructor and a method called ngOnInit() exist. By default ngOnInit is called when the class is executed.

Let's test how the flow works. Now, the parent component is the app component which is generated by default. Any component added later becomes the component for child.

When we hit the url in the browser "http:/localhost:4200/," the index.html file shown below is executed first.

<html lang = "en">
 
   <head> 
      <meta charset = "utf-8"> 
      <title>Angular7</title> 
      <base href = "/"> 
      <meta name = "viewport" content = "width = device-width, initial-scale = 1"> 
      <link rel = "icon" type = "image/x-icon" href = "favicon.ico"> 
   </head> 
   <body> 
      <app-root></app-root>
   </body> 

</html>

The above is the standard html file and we see nothing in the browser printed on it. We will look at the tag in the section on the body.

<app-root></app-root>

This is by default the root tag that the Angular creates. The reference for this tag is in the main.ts file.

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module'; 
import { environment } from './environments/environment';

if (environment.production) { 
   enableProdMode(); 
}
platformBrowserDynamic().bootstrapModule(AppModule).catch(err => console.error(err));

AppModule is imported from the main parent module app, and the same is given to the bootstrap module, which causes the load of the appmodule.\

Let us now see the app.module.ts file −

import { BrowserModule } from '@angular/platform-browser'; 
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module'; 
import { AppComponent } from './app.component'; 
import { NewCmpComponent } from './new-cmp/new-cmp.component';

@NgModule({ 
   declarations: [
      AppComponent, 
      NewCmpComponent 
   ],
   imports: [ 
      BrowserModule, 
      AppRoutingModule '
   ], 
   providers: [], 
   bootstrap: [AppComponent] 
})
export class AppModule { }

Here, the name given is the AppComponent, i.e. the variable for storing the app.component.ts reference and the same is given to the bootstrap. Now let's see the app.component.ts file.

import { Component } from '@angular/core';
@Component({
   selector: 'app-root', 
   templateUrl: './app.component.html', 
   styleUrls: ['./app.component.css'] 
}) 
export class AppComponent { 
   title = 'Angular 7'; 
}

Angular core is imported and referred to as the variable, and the Declarator uses the same as –

@Component({ 
   selector: 'app-root', 
   templateUrl: './app.component.html', 
   styleUrls: ['./app.component.css'] 
})

TemplateUrl and styleUrl are given in the declarator reference to the selector. The selector here is nothing other than the tag that is placed in the index.html file we have seen above.

The AppComponent class has a variable named title that is displayed in the browser. The @Component uses the app.component.html named templateUrl, which is the following –

<div style = "text-align:center"> 
   <h1> Welcome to {{ title }}! </h1> 
</div>

It only has the html code in curly brackets, and the variable title. It will be replaced by the value in the app.component.ts file. This is termed binding. In the following chapter we'll discuss the concept of binding.

Now we have a new component called new-cmp. The same goes for the app.module.ts file, when the command is executed to create a new component.

App.module.ts has a reference to the newly generated component.

Let's check the new created files in new-cmp now.

new-cmp.component.ts

import { Component, OnInit } from '@angular/core';
@Component({
   selector: 'app-new-cmp', 
   templateUrl: './new-cmp.component.html', 
   styleUrls: ['./new-cmp.component.css'] 
}) 
export class NewCmpComponent implements OnInit {   
   constructor() { } 
   ngOnInit() { } 
}