AngularJS Components

 

 

Learn Components in AngularJS-14

The main purpose of Angular Component is to generate a part of web page called view, with the help of template.

In this tutorial, you will learn how to work with component and template.

Create a component:

Create Component from CLI

create two components 

 C:\>ng4app> ng g c components/user 

ng angular command 

g ( generate) 

c (component)

 

Result:

The output is as show below −

CREATE src/app/user/user.component.html (28 bytes)
CREATE src/app/user/user.component.spec.ts (671 bytes)
CREATE src/app/user/user.component.ts (296 bytes)
CREATE src/app/user/user.component.css (0 bytes)
UPDATE src/app/app.module.ts (431 bytes)
 

Here,

UserComponent is created under src/app/user folder.
Component class, Template and stylesheet are created.
AppModule is updated with new component.

 

 

 

 // src/app/user.component.ts

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

@Component({
  selector: 'app-user',
  templateUrl: './user.component.html',
  styleUrls: ['./user.component.css']
})
export class UserComponent implements OnInit {

 username: string = "";
   constructor() { } 
   ngOnInit() { 
      this.username = "John" ;
   } 

}

// src/app/user.component.html

<p>User details!</p>
Username : {{ username }}

 
Open src/app/app.component.html and include newly created component.

  

// src/app/app.component.html

 <app-user></app-user>

 Output:

 Templates

Template is part of Angular component and used to generate the HTML content. Templates are plain HTML with additional functionality.

Adding a template

Angular provides two types of meta data to attach template to components.

1.  Template can be attached to Angular component using @component decorator’s meta data.
2.  templateUrl

We already know how to use templateUrl. It is a relative path of the template file. For example, AppComponent set its template as app.component.html.

 

 Using template metadata

 // src/app/user.component.ts

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

@Component({
  selector: 'app-user',
   template: `<h1>{{ title }}</h1>`, 
  styleUrls: ['./user.component.css']
})
export class UserComponent implements OnInit {

 username: string = "";
   constructor() { } 
   ngOnInit() { 
      this.username = "John" ;
   } 

}

 

 

 

 Adding CSS using styleUrls (external Css).

In the previous chapter, we create an angular project. Open src/app.component.css, add the following code in and save the file. Now check the output in browser.

h1{
    color: blue;
    }
h2{
    color: orange;
    } 

Include bootstrap in AngularJS Project

 

Install bootstrap and JQuery library using below commands

C:>\MyApp3\npm install --save bootstrap@4.6.0 jquery@3.5.1 

 
The styles added in angular.json will be effected for all templates.