angular-ivy-1airp9

Edit on StackBlitz ⚡️

Angular Beginner Tutorial: Tour of heroes

Goal is to build an Angular App that helps "...a staffing agency to manage its stable of heroes" , according to the Angular website.

Result

• The finished application gets a list of heroes
• Displays heroes in a list
• Edits a selected hero's detail
• Navigates between different heroic data views

Steps

• Create, display and format the heroes component: Learn 2-way data binding, Import modules, declaring components

• Display the hero's list and add functionality: Learn about *ngFor and *ngIf, toggle style with class binding

• Create a child component (HeroDetailComponent), learn about property binding to control the child component

• Learn about @Input and make the property available for binding by external components

• Create a Service: Refactor data to the HeroService and use it as provider to root level, add asynchronous getData method

• Learn about Angular Dependency Injection

• Learn about RxJS Observables, use RxJS of()

• Create a message service for communication betweeen classes

• Add angular router to navigate betweeen components

• Configure router in AppRoutingModule

• Define, redirect and parameterize a route, use routerLink directive

• Share HeroService with other components

• Use HTTP in the app: Load heroes from API and learn about HTTP method put,post and delete

• Learn more about observables

• Fix "app-root" selector did not match any elements error!