CODEWITHSUNDEEP
javascriptangular
mfrachet
mfrachet

Reputation: 8922

Angular 2 and component tree

I'm studying Angular 2 internal components and behaviors and I'm having some questions concerning the component tree management.

In a web app based on components, it's clear that we have a component tree. One component is composed of another one, from top to bottom, and it's really powerful.

enter image description here

But now, I m wondering how does angular 2 manages the representation of this component tree internally ?

What I mean there is that we never say in an angular component, what components will be inside of it, except in the template.

For example, I never say in my HomeComponent definition that it owns a PrestaCardComponent :

import { Component, OnInit, Inject } from '@angular/core';

@Component({
    selector: 'app-home',
    templateUrl: './home.component.html',
    styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {

    prestations: Array<any>;
    featurettes: Array<any>;
    constructor( @Inject('AppStore') private appStore: any) {
        this.prestations = [];
        this.featurettes = [];
    }

    ngOnInit() {

    }

}

Except in my template :

<div *ngFor="let prestation of prestations" class="col-md-4 m-b">
                <app-presta-card [title]="prestation.title" [content]="prestation.content" [image]="prestation.image"></app-presta-card>
            </div>

What I understand it means

It means that Angular 2 is able to create the virtual component tree, by reading the different templates.

How can it be possible ? How does it work ?

Upvotes: 0

Views: 1465

Answers (3)

Mr.Moe
Mr.Moe

Reputation: 507

All the configuration of your components are rooted in an NgModule.

As Madhu Ranjan already mentioned in his answer there are the following 3 important parts in an NgModule, namely being:

declarations : List of components, directives, and pipes that belong to this module.

imports : List of modules to import into this module. Everything from the imported modules is available to declarations of this module.

exports : List of components, directives, and pipes visible to modules that import this module.

Actually there is even an FAQ for NgModule as it was a major change in the angular2 architecture since (I think) RC5.

Each and every component has to be part of an NgModule. It declares a part of your application which functionalities belong to each other. You can even nest NgModules inside each other with the imports part of it.

A positive part IMO is that you can organize your application very well with this structure as each angular module has its own routing configuration.

Furthermore you can limit accessability of services that should be used by declaring them inside e.g. a (sub-) module of another module just to name a few important features.

Check out the Angular2 Docs for more information about this and many more subjects. It is pretty detailed and IMO very easy to understand as the angular team took alot of effort of keeping it up to date and clean (when you don't mind searching a bit for the parts you need as the topic grouping is kinda crappy in the docs).

Upvotes: 1

Madhu Ranjan
Madhu Ranjan

Reputation: 17894

NgModules are key to understanding how Angular deciphers the template when it parses it.

Look into the definition of these properties while decorating with @NgModule,

declarations : List of components, directives, and pipes that belong to this module.

imports : List of modules to import into this module. Everything from the imported modules is available to declarations of this module.

exports : List of components, directives, and pipes visible to modules that import this module.

using this knowledge Angular knows what selector means what, and using Reflection it gets Metadata for the component.

Of course there is more to it, but this may be a start.

Hope this helps!!

Upvotes: 1

Manish
Manish

Reputation: 2180

enter image description here

Use Augury. you will get a clear insight.

Upvotes: 2

Related Questions