multiple components in same page in Angular 5

Question

Good morning,

I've been learning Angular 5 and despite of all the new stuff, there is something that I can't realize how to be done yet.

In the past I studied AngularJS, so I'm triying to understand Angular 5 and seeing how the framework has changed,

Currently I'm dealing with a simple thing that I could do in Angular JS, multiple controllers per page, something like this.

<div class="widget" ng-controller="widgetController">
    <p>Stuff here</p>
</div>

<div class="menu" ng-controller="menuController">
    <p>Other stuff here</p>
</div>

But I don't know how to do it in Angular 5 because so far I only find examples and code relatet to a component-per page.

Maybe it is a very simple answer, but I will really apreciate any help.

Ringo · Accepted Answer · 2018-01-13 16:19:09Z

3

super simple :)

Instead of labeling each element with a controller, you create custom component instead.

<widget></widget>
<menu></menu>

you can declare a custom component by doing the following...

import { Component } from '@angular/core';

@Component({
  selector: 'menu',
  template: `<div> stuff goes here </div>`
})
export class MenuComponent  {

}

Angular docs have a tutorial call tours of heros, and it goes in depth into angular.

https://angular.io/tutorial

edited Jan 13, 2018 at 16:19

answered Jan 12, 2018 at 14:20

Ringo

6215 silver badges14 bronze badges

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

Comments

user4676340 · Accepted Answer · 2018-01-12 14:17:02Z

0

Oh it's very simple !

Here it is :

<app-widget></app-widget>
<app-menu></app-menu>

In Angular, you create components that will replace the tags that match their selectors.

answered Jan 12, 2018 at 14:17

user4676340

Collectives™ on Stack Overflow

multiple components in same page in Angular 5

2 Answers 2

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Related