Basic Concepts of Angular

Understanding the Angular Lifecycle

What is Angular?

Angular Lifecycle from Angular Documentation


Root Module

/* JavaScript imports */
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';/* the AppModule class with the @NgModule decorator */
declarations: [AppComponent],
imports: [],
exports: [],
providers: [],
bootstrap: [AppComponent]
export class AppModule { }

Module Metadata


// Metadata
selector: 'app-hero-list',
templateUrl: './hero-list.component.html',
providers: [ HeroService ]
// Actual component class
export class HeroListComponent implements OnInit {
heroes: Hero[];
selectedHero: Hero;
constructor(private service: HeroService) { } ngOnInit() {
this.heroes = this.service.getHeroes();
selectHero(hero: Hero) { this.selectedHero = hero; }

Component Metadata


<h2>Hero List</h2><p><i>Pick a hero from the list</i></p>
<li *ngFor="let hero of heroes" (click)="selectHero(hero)">
<app-hero-detail *ngIf="selectedHero" [hero]="selectedHero"></app-hero-detail>
Hierarchy of templates in Angular

Data Binding

four types of data binding in Angular



Angular Lifecycle

Programmer Since 17. Currently working in front-end and mid-tier programming for a finance company. Check out my Tech blog @

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store