Pass property to the Angular System

Question

Good morning,

Could help me pass a property for an angular Component.

I have a page and call

<app-top-bar name="Agendamento" ></app-top-bar>

How I’ve used React is more or less the way we pass ownership on it.

Now in my component I would like to pass inside that Ionic Component.

<ion-title>{{name}}</ion-title>

Well I’m starting at the angle, sorry to have little information.

Answer 1

To do this, you will need to use @Input on your child component to access the "name" variable, which is being passed to your parent.

For example, let’s consider that we have a component users:

<app-users [users]="users"></app-users>

We are passing the values of the variable users to it, and in our component Users, we do it this way:

// users.component.ts  
import { Component, Input } from '@angular/core';
@Component({
    selector: 'app-users',
    templateUrl: './users.component.html',
})

export class TeamModalComponent {
    // Com este @Input(), dizemos que
    // esta variável está associada ao
    // componente pai, MainComponent
    @Input() users;
}

In this article of my blog, I wrote about it just in case you want to read it over there!

Answer 2

You can use both of the form of @Input, as in the form of ng-content.

Component call:

<app-top-bar>Agendamento</app-top-bar>

Within the component:

<ion-title>
     <ng-content></ng-content>
</ion-title>

In your case @Input is better, but when to use ng-content? When you have HTML blocks that need to be passed to a component. It is usually used in building templates.