Show List
Tutorials > Angular > Angular Component

Angular Component

Components are building blocks of the Angular application user interface. For example an online shopping website can have components to show items catalogue, shopping cart, checkout, user login and authentication.

  • TypeScript class is used to create a component using @Component decorator. Components typically have selector, HTML template file, style.
  • Component needs to be added in the NgModule so that other components in the application can access it.
  • Angular CLI can be used to easily create a component and register with NgModule.

Create a new component

We are going to add a new component under the same "first-application" we created under previous chapter.

Run command "ng g c home" to create the new "home" component.
PS C:\Users\mail2\Downloads\angular\first-application> ng g c home
CREATE src/app/home/home.component.html (19 bytes)
CREATE src/app/home/home.component.spec.ts (585 bytes)
CREATE src/app/home/home.component.ts (267 bytes)
CREATE src/app/home/home.component.css (0 bytes)
UPDATE src/app/app.module.ts (388 bytes)
PS C:\Users\mail2\Downloads\angular\first-application>
There are the four new files created: home.component.ts, home.component.html, home.component.css and home.component.spec.ts. home.component.css is blank by default and home.component.spec.ts is used for unit testing. 

The new "home" component also gets registered in the app.module.ts.

home.component.ts
import { Component, OnInit } from '@angular/core';

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

  constructor() { }

  ngOnInit(): void {
  }

}


home.component.html

Default: By default Angular CLI puts below code in the newly generated component HTML 
<p>home works!</p>

Update it as below:
<button> Demo </button>


app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';
import { HomeComponent } from './home/home.component';

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


To display the newly added component on the webpage, add the <app-home> selector on the app.component.html file

app.component.html
<app-home></app-home>
<div>
  <h1 id="london">London</h1>
  <p>London, the capital of England and the United Kingdom, is a 21st-century city with history stretching back to
    Roman times.</p>

  <h1 id="paris">Paris</h1>
  <p>Paris, France's capital, is a major European city and a global center for art, fashion, gastronomy and culture.
    Its 19th-century cityscape is crisscrossed by wide boulevards and the River Seine.</p>

  <h1 id="tokyo">Tokyo</h1>
  <p>Tokyo, Japan’s busy capital, mixes the ultramodern and the traditional, from neon-lit skyscrapers to historic
    temples. The opulent Meiji Shinto Shrine is known for its towering gate and surrounding woods.</p>
  </div>

Output:
http://localhost:4200/ 
London
London, the capital of England and the United Kingdom, is a 21st-century city with history stretching back to Roman times.
Paris
Paris, France's capital, is a major European city and a global center for art, fashion, gastronomy and culture. Its 19th-century cityscape is crisscrossed by wide boulevards and the River Seine.
Tokyo
Tokyo, Japan’s busy capital, mixes the ultramod

Source Code:
https://github.com/it-code-lab/angular-application


Next: Angular Directives

    Leave a Comment

  • captcha text