Pass an object array to a Component at angular 8

Asked

Viewed 1,215 times

0

Good afternoon,

I would like a help to pass an array of objects to a Component at angular 8.

In case I have a form that I use in two parts in my code in one of them I need this blank form and in the other I need it to be filled with bank information.

The blank is to register new services and the filled is to edit a service.

So when I call the HTML file to load this information I cannot pass this data to the Component.

I already tried with @Input, but to no avail.

Here I make the call from the app-form-service: 

<ion-content>
  <app-form-service></app-form-service>
</ion-content>

Here is the Component where I need to load the DB information:

<ion-content>
  <form action="">
    <div class="photo-container">
      <img
        src="https://cdn.icon-icons.com/icons2/38/PNG/512/photo_picture_4894.png"
        alt="logo"
      />
    </div>
    <ion-item>
      <ion-label>Categorias</ion-label>
      <ion-select>
        <ion-select-option value="01">Cabelo</ion-select-option>
        <ion-select-option value="02">Pedicure</ion-select-option>
        <ion-select-option value="03">Manicure</ion-select-option>
        <ion-select-option value="04">Pele</ion-select-option>
        <ion-select-option value="05">Sobrancelha</ion-select-option>
        <ion-select-option value="06">Maquiagem</ion-select-option>
        <ion-select-option value="07">Bronzeamento</ion-select-option>
      </ion-select>
    </ion-item>
    <ion-item>
      <ion-label position="floating">Título do serviço</ion-label>
      <ion-input></ion-input>
    </ion-item>
    <ion-item>
      <ion-label position="floating">Descrição</ion-label>
      <ion-input></ion-input>
    </ion-item>
    <ion-item>
      <ion-label position="floating">Preço</ion-label>
      <ion-input></ion-input>
    </ion-item>
    <ion-item>
      <ion-label position="floating">Tempo do serviço (em minutos)</ion-label>
      <ion-input></ion-input>
    </ion-item>

    <ion-button type="submit" expand="block">Cadastrar</ion-button>
  </form>
</ion-content>
angular ionic

  • But you don’t use one model for that reason?

  • @Leandrade could show an example of how to use the model?

  • Basically a model is a Javascript class (Typescript) that serves as a model (mirror) for the data returned by the Database (Api), you instance the class and can use it in forms, mirroring the data and sending the model to the database. Give a searched in the directive called Angular ngModel.

  • Could you share the Typescript code? On your component selectors (xml markups) I did not see the attributes to send information from the parent component (Parent) to the child (Child) using the @Input annotation.

1 answer

0

Suppose you have a "Parent" component (Parent)

**componente-pai.ts**
----------


@Component({
    selector: 'componente-pai',
    templateUrl: './componente-pai.html',
})
export class ComponentePai implements OnInit {
    public valorEnviado: string;

Below the template (Markup) of the parent component: 

**componente-pai.html**
----------

<componente-filho [valorRecebido]="valorEnviado"></componente-filho>

And a "Son" component (Child Component)

**componente-filho.ts**
----------

@Component({
    selector: 'componente-filho',
    templateUrl: './componente-filho.html',
})
export class ComponenteFilho implements OnInit {
    @Input() public valorRecebido: string;

Below the template (Markup) of the child component: 

**componente-filho.html**
----------

<h3>Mostrando valor recebido: {{ valorRecebido }}</h3>

  • To pass an Array of objects the logic is exactly the same, instead of passing one string you will spend a Array<SeuTipoDeObjeto>

Browser other questions tagged angular ionic

You are not signed in. Login or sign up in order to post.