Get content from specified tags in angular component

Question

Is it possible in angular 2+ component get content of some tags? Something like this

import { Component } from '@angular/core';
@Component({
  selector: 'my-component',
  template: '<div>My component <p><ng-content from='forp'/></p><span><ng-content from='forspan'/></span></div>',
})
export class AppComponent {

}

Then we write

    <my-component>
      <forp>Content for p-tag</forp>
      <forspan>Content for span-tag</forspan>
    </my-component>

And it build as

    <div>
      My component 
      <p>Content for p-tag</p>
      <span>Content for span-tag</span>
    </div>

?

May be you need to see the details about angular directives

Ramesh Rajendran
– Ramesh Rajendran

2018-01-09 07:33:41 +00:00
Commented Jan 9, 2018 at 7:33 — Ramesh Rajendran
– Ramesh Rajendran, Commented Jan 9, 2018 at 7:33

Sandip Jaiswal · Accepted Answer · 2018-01-09 07:38:25Z

1

Yes is it possible. You can create a component and take HTML when you will use you component like this:

<my-comp>
  <some-comp></some-comp>
  <some-other-comp></some-other-comp>
</my-comp>

MyComponent html will look like this:

<div>
  // some html code
  <ng-content select="some-other-comp"></ng-content>
  <ng-content select="some-comp"></ng-content>
  // some html code
</div>

Hope it will help

answered Jan 9, 2018 at 7:38

Sandip Jaiswal

3,7702 gold badges15 silver badges15 bronze badges

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

2 Comments

Maksim Zarechnyi Over a year ago

Oh, yes, it helps! But I thought that I can do it without creating other components.

Sandip Jaiswal Over a year ago

Yes but only one html will be inject in your component and ng-content will not have select attribute.

Collectives™ on Stack Overflow

Get content from specified tags in angular component

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related