Brand

Angular Components

  • As we know, most Angular applications are developed using components.
  • Components are classes containing the code for processing.
  • Components will interact with html files which are displayed on the browser.
  • Angular CLI creates the default or main or root component and is called an App component which we have seen in previous sections.
  • We can create our own component using the below command.
ng generate component myfirstcomponent

angular-firstComponents

We can also create components in below ways.

Ng generate component first
ng generate c second
ng  g c third
Below screenshot shows the output

ang-firstComponents-output

We can see that below files are created for our component “myfirstcomponent”. Angular CLI has created those files with default code.

  • Myfirstcomponent.component.css — CSS / Style for the source component
  • Myfirstcomponent.component.html — HTML for the source component
  • Myfirstcomponent.component.spec.ts — for unit testing
  • Myfirstcomponent.component.ts — to do all our processing.

We can also see the console logs stating angular cli has updated the app.module.ts. And we can see the same from below code. Our newly created myfirstcomponent is added to module file (import and declaration).

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { FirstComponent } from './first/first.component';
import { SecondComponent } from './second/second.component';
import { ThirdComponent } from './third/third.component';
import { MyfirstcomponentComponent } from './myfirstcomponent/myfirstcomponent.component';

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

Lets see how this overall component structure will work.

As we know, During project creation angular CLI will create the parent component , (APP or Root component is created by default) and the components created by the user are added in later stages as child components.

When we open the application in browser thru http://localhost:4200 – Index file is executed.

By default in angular.json below configuration is present. Hence the index.file is invoked @ first along with main.ts

        "index": "src/index.html",
        "main": "src/main.ts",



<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Myfirstapp</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>

We can see the selector is used in the html file and it doesnt have any other html code so it will not display anything.

Main.ts file also generated by default by angular cli. We can see AppModule is imported and bootstrapped.

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));

Lets see whats happening in app.module.ts. Here App component is imported and declared which will in turn bootstrap AppComponent post that its child components are called one by one.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { MyfirstcomponentComponent } from './myfirstcomponent/myfirstcomponent.component';

@NgModule({
  declarations: [
    AppComponent,
    MyfirstcomponentComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }
App.component.ts
import { Component } from '@angular/core';

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

Selector is nothing but the one used in index.html, templateUrl which contains the reference to its html and styleUrls for css. Now whatever inside this HTML will be displayed on the screen. The AppComponent Class contains all the code.

Previous
Next
Subscribe Now