Angular Components

Create Component

Components can be created using Angular CLI or manually. Usually Angular recommends to create component using CLI. CLI will create components and its files and will also import and update component in app.module.ts.

Component using CLI

Hoe to create a component using Angular CLI.

or

Once the above command is executed, a server folder is created in app.

Add the selector named app-server in app.component.html file.

include component in app module

        <!-- app.component.html -->
    
<h1>{{title}}</h1>

<app-server>App Server Works</app-server>

Manually

To create a component manually, follow steps below.

1. Create component folder in app directory by name courses.
2. Create courses.components.html in courses folder and add a paragraph Courses Works.
3. Create courses.components.css in courses folder and add styles.
4. Create courses.components.ts in courses folder.
5. Add code below in courses.components.ts

        /*courses.components.ts*/
     import { Component } from '@angular/core';
     import { RouterOutlet } from '@angular/router';
   
     @Component({
       selector: 'courses-server',
       standalone: true,
       imports: [RouterOutlet],
       templateUrl: './courses.component.html',
       styleUrls: ['./courses.component.css'],
     })
     export class ServerComponent {
       
     }
   

6. import component in app.component.ts and update.

          /*app.component.ts*/   
     import { Component } from '@angular/core';
     import { RouterOutlet } from '@angular/router';
     import { CourseComponent } from './course/course.component';
   
     @Component({
       selector: 'app-root',
       standalone: true,
       imports: [RouterOutlet, CourseComponent],
       templateUrl: './app.component.html',
       styleUrl: './app.component.css',
     })
     
     export class AppComponent {
       title = 'ngApp';
     }  
   

7. import component in app.module.ts file and update @NgModule declaration.

   ( For angular version 16 or less )

          /*app.module.ts*/
   
     import { NgModule } from '@angular/core';
     import { BrowserModule } from '@angular/platform-browser';
     
     import { AppComponent } from './app.component';
     import { ServerComponent } from './server/server.component';
    import { CourseComponent } from './course/course.component';
     
     @NgModule({
       declarations: [
         AppComponent,
         ServerComponent,
         CourseComponent
       ],
       imports: [
         BrowserModule
       ],
       providers: [],
       bootstrap: [AppComponent]
     })
     export class AppModule { }
   

8. Add the selector named app-courses in app.component.html file and run.

Components Structure

Each Components includes template (html file), styles (css file) and class (.ts file).

Lets Understand the Structure of Angular Component.

Template

Template includes the structure of Angular Application. Each template has a .html file for templating. The default component app components template is app.component.html is app directory. Lets add some data in app template.

      <!--app.component.html-->

<h1>{{title}}</h1>

Add more data

To add more data, first declare property in AppComponent class of app.component.ts and then bind in template. Here is an example of Data Binding.

      <!--app.component.ts-->

import { Component } from '@angular/core';

  @Component({
    standalone: true,
    imports: [RouterOutlet],
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
  })
  export class AppComponent {
    title = 'ngApp';
    name="Avinash";
    id=12;
  }    

      <!--app.component.html-->
  
  <h1>{{title}}</h1>
  <p>Name is {{name}} and id is {{id}}.</p>
  

import statement

import statement is used to import Components in app.component.ts. To import forms in angular, we have to import form component first.

      <!--app.component.ts-->
  
  import { Component } from '@angular/core'; 

Add Form Module

      <!--app.component.ts-->
    
    import { Component } from '@angular/core'; 
    import { FormsModule } from '@angular/forms'; 
  

@Component decorator

@component decorator is defined in app.component.ts. Component decorator includes three properties.

Learn mode about component decorator

1. selector
2. template/templateUrl
3. styles/styleUrls
4. standalone:true
5. imports:[RouterOutlet]

We will learn more about component decorator in next topic.

export class

export class is used to export properties to template. The build-in property is title in app.component.ts is by default ngApp.

We can add more properties in export class and then use in template. The value of property can be any data type like, string, number, boolean, array object etc.

      <!--app.component.ts-->
      
export class AppComponent {
    title = 'ngApp';
}

Add properties

      <!--app.component.ts-->
       
 export class AppComponent {
     title = 'ngApp';
    name="Avinash";
    id=12;
 }