Some Angular Concepts

1. We are talking about angular directives
2. Some Dependency Injection
3. And Async Constructors

What do you mean by adding behavior

    @Component({
  template: `
    <a routerLink="/home">Home</a>
  `,
  imports: [RouterLink]
})
export class AppComponent {}

export const routes: Routes = [
  {
    path: 'home',
    component: HomeComponent
  }
]

routerLink is a special attribute called directive, they are good at adding behaviors to html element or components.

This <a> tag used to link to different page. But now it links to HomeComponent because of routerLink. We changed the behavior of <a> tag.

---

Dependency Injection

It’s a design pattern in a computer science, not an Angular thing.

“DI” is a design pattern and mechanism for creating and delivering some parts of an app to other parts of an that require them

Angular official documentation

Creating and delivering

Creating and Sharing

---

Why Constructors can’t be async

Constructor can not be async. Async activity something that will happen some point in the future, that you don’t know when it will be finished.

When you instantiate an object, this constructor will be called. You don’t want your constructor be heavy because you might be hundred of those instances. You don’t want it to be slow.

In our case is the component that could be used more than once.

In angular ngOnInit life cycle hooks can be used with async await to fetch api calls, this way our 50 component won’t be stuck at the instantiation phase.