CODEWITHSUNDEEP
angularjsangularangular5
TigerSpirt
TigerSpirt

Reputation: 161

Angular 1 to Angular 5 (import nested components)

Before

Now

How import subcomponents in a component father like a angular 1.5? I do the tutorial Heroes from angular 5, but not explaint this transition, all components are imported in app.modole.ts.

The next image try to explain a litle how a I have imports in angular 1.5

enter image description here

Someone know how import subcomponents in a component in the new angular 5? or is absolute necesary import all components in app.module.ts?

Upvotes: 3

Views: 723

Answers (2)

Estus Flask
Estus Flask

Reputation: 223194

It is no different to AngularJS in any way. This can be done with single App module (which isn't enough for complex applications), or a hierarchy of modules.

In AngularJS:

angular.module('app', ['foo'])
.component('app', {...});

angular.module('foo', [])
.component('foo', {...})
.component('barUsedByFoo', {...});

In Angular:

@NgModule({ declarations: [FooComponent, BarUsedByFooComponent], exports: [FooComponent] })
class FooModule {}

@NgModule({ imports: [FooModule], declarations: [AppComponent], bootstrap: [AppComponent] })
class AppModule {}

Angular team proposes the concept of feature modules. Feature module should explicitly specify its dependency on other modules with imports. All module components are specified in declarations and (optionally) exports.

The difference from AngularJS is that Angular modules are allowed to have local components. If BarComponent with bar selector is specified in both declarations and exports, it will be available in all component templates. If BarComponent is specified only in declarations and not exports, it will be available only in component templates from this module. This way different modules can have different <bar> that won't pollute global namespace.

If BarComponent is route component, it should be specified in both declarations and exports, because this way it will be available to router module.

Upvotes: 3

DrNio
DrNio

Reputation: 1976

Components are included in a module. So a module contains and encapsulates 1 or more components and "expose" them to public with exports keyword. You inject all the services in the module so all components and subcomponents will have the same instance - singleton service.

After you create the components that you want and declare them in the module then you can use them in the html template as siblings, children component etc. it won't matter.

So as an example if you have a <users> component which will be the statefull parent component, inside that template you can add any component child you will need for example <user-personal-details> <user-acedemic-details> etc. The only thing you need to do is import all these in the same module.

Edit: I guess this part of the docs https://angular.io/tutorial/toh-pt3 could help you more to understand. If you read what that CLI command does is ... (HeroDetailComponent) declares the component in AppModule. And then in the heroes.component.html it adds it just like this <app-hero-detail [hero]="selectedHero"></app-hero-detail>

Upvotes: 1

Related Questions