CODEWITHSUNDEEP
angular
ZhukV
ZhukV

Reputation: 3188

Angular 5: get the value of node from component selector

How can I get the text content from the component selector?

As an example:

<div class="page-wrapper">
    <app-page-title>List applications</app-page-title>

    <router-outlet></router-outlet>
</div>

I have the app-page-title component, but I do not understand, how I can get the value of this node ("List applications") in my component.

UPD:

<app-card>
  <app-card-title>Some My Title</app-card-title>
  <app-card-content>Some My Content</app-card-content>
  <app-card-footer>Some My Footer</app-card-footer>
</app-card>

How can I get the inner nodes from app-card component?

Upvotes: 0

Views: 424

Answers (2)

Pytth
Pytth

Reputation: 4176

The easiest way to do it, would be to set the title in your component and then interpolate that into your view. For instance.

<div class="page-wrapper">
    <app-page-title>{{myPageTitle}}</app-page-title>

    <router-outlet></router-outlet>
</div>

And then in your component typescript, it would be something like:

@Component({...})
export class pageTitleComponent {
  ...
  myPageTitle = 'List applications'
}

Upvotes: 1

DeborahK
DeborahK

Reputation: 60578

Is it possible to rewrite it like this:

<div class="page-wrapper">
    <app-page-title text="List applications"></app-page-title>

    <router-outlet></router-outlet>
</div>

If so, then you can define an input property in the app-page-title (child) component using the input decorator. Then the child component has the value in that property.

@Input() text: string;

Upvotes: 0

Related Questions