Angular 2 and component tree

Question

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.

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 ?

Manish · Accepted Answer · 2016-11-23 14:56:03Z

2

Use Augury. you will get a clear insight.

answered Nov 23, 2016 at 14:56

Manish

2,19018 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

mfrachet Over a year ago

What I wanted to know is how does angular 2 creates its internal component tree based on html templates. In the internals, not the real representation in augury. I wanted to learn the intermediate process between the component tree in the DOM, and the representation given by Augury . But thanks for the answer :)

Madhu Ranjan · Accepted Answer · 2016-11-23 15:01:50Z

1

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!!

answered Nov 23, 2016 at 15:01

Madhu Ranjan

18k7 gold badges65 silver badges70 bronze badges

Comments

Community · Accepted Answer · 2020-06-20 09:12:55Z

1

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).

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Nov 23, 2016 at 15:30

Mr.Moe

5161 gold badge5 silver badges21 bronze badges

1 Comment

mfrachet Over a year ago

Yeah, I've got it concerning the module. What I'm looking for is probably for the reflexivity concerning template parsing, and the ability of angular to read the template of a component to create its internal tree. But your answer is really interesting, I thank you :)

Collectives™ on Stack Overflow

Angular 2 and component tree

3 Answers 3

1 Comment

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related