Basic Concepts of Angular

Understanding the Angular Lifecycle

What is Angular?

Image for post
Image for post
Angular Lifecycle from Angular Documentation

Modules

Root Module

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

Module Metadata

Components

// Metadata
@Component({
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

Templates

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

Data Binding

Image for post
Image for post
four types of data binding in Angular

Services

Conclusion

Image for post
Image for post
Angular Lifecycle

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

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