How to reuse an angular component multiple times

Question

I'm learning the basics of angular, but i still can't figure out how to reuse the same component multiple times in the same document.

This is the relevant code:

test.module.ts

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent }  from './test.component';

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

test.component.ts

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

@Component({
    selector: 'example',
    templateUrl: "./test.component.html",
    styleUrls: ["./test-common.css"],
  })

  export class AppComponent  { 

  name = 'Angular'; 

  changeName() {
    this.name = "duck";
  }
}

test.component.html

<h1>Hello {{name}}</h1>
<button (click)="changeName()">Click me!</button>

and this is the main index.html

<!DOCTYPE html>
<html>
<head>
<title>Angular QuickStart</title>
<base href="/">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css">

<!-- Polyfill(s) for older browsers -->
<script src="node_modules/core-js/client/shim.min.js"></script>

<script src="node_modules/zone.js/dist/zone.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>

<script src="systemjs.config.js"></script>
<script>
  System.import('main.js').catch(function(err){ console.error(err); });
</script>
</head>

<body>

<example>Loading ...</example>
<example>Loading ...</example>
<example>Loading ...</example>
<example>Loading ...</example>
</body>

</html>

The problem is: i wanted angular to add the component to every "example" tag in index.html. But i see it works only for the first tag while the others are ignored. Can you help me to understand this behaviour?

thanks in advance

Just follow the 'Tour of Heroes' angular.io/docs/ts/latest/tutorial — Robin Dijkhof
– Robin Dijkhof, Commented May 19, 2017 at 13:23
i've already followed that tutorial, it uses the ngFor to load multiple copies of the same component. But i'd like to see an example where angular loads the component every time there is an "example" tag — rekotc
– rekotc, Commented May 19, 2017 at 13:28

Max Koretskyi · Accepted Answer · 2017-05-19 14:05:39Z

8

The problem is that in your application the example is the root component. Angular process only one DOM element for the root component at the top level. Here is how you can modify your example template to see it rendered multiple times:

<h1>Hello {{name}}</h1>
<button (click)="changeName()">Click me!</button>

<!-- rendered multiple times -->
<b-comp></b-comp>
<b-comp></b-comp>

And add BComponent into the application:

@Component({
  selector: 'b-comp',
  template: `<span>b-comp</span>`
})

export class BComponent {
}

And add it to the declarations in AppModule:

@NgModule({
   imports:      [ BrowserModule ],
   declarations: [ AppComponentl, BComponent ],
   bootstrap:    [ AppComponent ]
})

edited May 19, 2017 at 14:05

answered May 19, 2017 at 13:34

Max Koretskyi

106k68 gold badges356 silver badges522 bronze badges

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

5 Comments

rekotc Over a year ago

mmm, i think i understood, but i can't put together a working example

Max Koretskyi Over a year ago

what's the error you get? you also need to referent the BComponent in AppModule, I added this information to the answer

rekotc Over a year ago

No errors shown but the example doesn't work at all. I have very little experience with angular, i've added a new b.component.ts and b.module.ts as instructed. I've modified test.component.html as you suggested. Do i have to change anything in index.html? Thanks for your patience.

rekotc Over a year ago

Maybe i didn't explain myself correctly, i need the "<h1> + <button>" to be repeated 4 times, once for every "example" tag.

Max Koretskyi Over a year ago

@rekotc, well, you'll have <span>b-comp</span> repeated 2 times in my example because it's the template of BComponent. Just put whatever html you need into BComponent

Collectives™ on Stack Overflow

How to reuse an angular component multiple times

1 Answer 1

5 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Linked

Related