Basic Concepts of Angular

Understanding the Angular Lifecycle

What is Angular?

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>
Hierarchy of templates in Angular

Data Binding

four types of data binding in Angular

Services

Conclusion

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