Angular - how to pass given to component differently when clicking on different buttons?

Asked

Viewed 39 times

0

I have a modal with a form on a page with a list of registered items:

<div class="collection">
    <div class="collection-item row" *ngFor="let data of data$ | async">
      <div class="col s7">
        {{ data.name }}
      </div>
      <div class="col s5">
        <a title="Editar"><i class="fas fa-edit right"></i></a>
      </div>
    </div>
</div>

<!-- botão que abre modal -->
<div class="fixed-action-btn">
  <a
    class="btn-floating btn-large modal-trigger"
    href="#modal1">
      <fa-icon [icon]="['fas', 'plus']"></fa-icon>
  </a>
</div>


<!-- componente do modal -->
<div id="modal1" class="modal">
  <app-register-data>
  </app-register-data>
</div>

This modal, when opened by the normal button, creates an empty form, without data, to create a new item. But I want to pass an item to the same form through a inbound property when opening through the form (whether through function or HTML template).

Internally the component app-register-data is already about the mistakes if inbound property is inserted or not:

open object change form 'date'

<div>
  <app-register-data [data]="{id: 1, name: 'name'}"></app-register-data>
</div>

open object registration form 'date'

<div>
  <app-register-data></app-register-data>
</div>
angular typescript

  • pq vc does not pass [data]="null", did not understand what the problem is

  • The problem is this: there are two points where I want to call the same modal, but each with different data.

1 answer

1


If I understand well what you want to do is use the same component to create and edit data using only one component in the template!?

if that’s what you can do:

// Controller do componente de listagem
interface IItem {
    id: number;
    name: string; 
}

class ListComponent {
    formData: Item,

    editItem(item) {
       this.formData = item
    }

    newItem() {
       this.item = { id: 0, name: '' }
    }
}

<div class="collection">
    <div class="collection-item row" *ngFor="let data of data$ | async">
      <div class="col s7">
        {{ data.name }}
      </div>
      <div class="col s5">
        <a title="Editar" (click)="editItem(data)"><i class="fas fa-edit right"></i></a>
      </div>
    </div>
</div>

<!-- botão que abre modal -->
<div class="fixed-action-btn">
  <a
    (click)="newItem()"
    class="btn-floating btn-large modal-trigger"
    href="#modal1">
      <fa-icon [icon]="['fas', 'plus']"></fa-icon>
  </a>
</div>


<!-- componente do modal -->
<div id="modal1" class="modal">
  <app-register-data [data]="formData">
  </app-register-data>
</div>

Browser other questions tagged angular typescript

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