CODEWITHSUNDEEP
angularangular5angular-components
UserMan
UserMan

Reputation: 471

multiple components in same page in Angular 5

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.

Upvotes: 2

Views: 9269

Answers (2)

Ringo
Ringo

Reputation: 621

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

Upvotes: 3

user4676340
user4676340

Reputation:

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.

Upvotes: 0

Related Questions