CODEWITHSUNDEEP
angular
Tom Smykowski
Tom Smykowski

Reputation: 26089

How to display block component inside another one?

I have a custom component called cat used in the system like that:

<cat>
   <b>This is a cat</b>
</cat>

Inside the cat component template i would like to show data nested inside the use of cat component above (in this example bolded "This is a cat" text.

What is a syntax for this? Something like (cat.ts):

{{showblockComponentContentSomethingLikeYeld}}

Upvotes: 0

Views: 314

Answers (3)

Dave Skender
Dave Skender

Reputation: 621

Rather than nesting content between the selectors, you can pass it to your cat component and then render it in the cat.html. Like this:

<cat [myContent]="This is a cat"></cat>

then have something like this in your component:

import { Component, Input } from '@angular/core';
[...]
@Component({
  [...],
  selector: 'cat'
})
export class MyCatComponent {

@Input() myContent: string;

[...]

}

and in cat.html:

{{ myContent }}

or, if you're passing HTML markup

<div [innerHTML]="{{ myContent }}"></div>

or, try this previously answered option: Render content between the component tags

Upvotes: 0

Yazan Shannak
Yazan Shannak

Reputation: 51

The Cat component is a child component, the parent component that has the child "Cat" component should be as you mentioned:

`<app-child><h1>Hello World</h1></app-child>`

While here's the trick, the angular way is to use ng-container. In the child "Cat" component:

<ng-content></ng-content>

Hope it helps and good luck

Upvotes: 1

Youp Bernoulli
Youp Bernoulli

Reputation: 5655

Something like this

<cat>
  <blockcomponent *databinding attributes classes*></blockcomponent>
</cat>

Where cat & blockcomponent are two seperate components.

Upvotes: 0

Related Questions