CODEWITHSUNDEEP
typescriptobjectbindingcomponentsangular8
Giacomo Cerretini
Giacomo Cerretini

Reputation: 59

How to binding an object to one component to another?

I try to learn Angular8 but, now i have a problem whit some code for passing an object or a value form one component to another.

I've tried @Input and whit this the result is undefined.

I have this component that return, whit [(ngModel)] the result of two input; title and desription. after the component app-add-item

import { Component, OnInit} from '@angular/core';

@Component({
  selector: 'app-add-item',
  templateUrl: './add-item.component.html',
  styleUrls: ['./add-item.component.scss'],
})

export class AddItemComponent implements OnInit {
  items = [];
  // itemList -> chenge next whit the list of lists for choice one
  itemList = 'example';
  itemID: number = this.items.length + 1;
  itemTitle: string;
  itemDescription: string;

  ngOnInit() {
    this.itemTitle = '';
    this.itemDescription = '';
  }

  addItem() {
    this.items.push({
      list: this.itemList,
      id: this.itemID,
      title: this.itemTitle,
      description: this.itemDescription,
      completed: false,
    });

    this.itemID++;

    this.ngOnInit();
  }

}

template html for app-add-item.

add-todo-item is the second component. That component generate the item view.

<section class="add-item-section">
    <div class="add-item-content">
        <input type="text" class="add-textbox add-title" placeholder="Add the best title ever!" [(ngModel)]="itemTitle"/>
        <input type="text" class="add-textbox add-description" placeholder="Add a description for the best todo item!" [(ngModel)]="itemDescription"/>
        <input type="button" class="add-button" value="+" (click)="addItem()"/>
    </div>
</section>

<section class="items-content">
    <div class="item-content" *ngFor="let item of items">
        <app-todo-item [itemTitle]= "item.title"></app-todo-item>
    </div>
</section>

after the component app-todo-item

import { Component, Input } from '@angular/core';

interface TodoItem {
  list: string;
  id: number;
  title: string;
  description?: string;
  completed: boolean;
}

@Component({
  selector: 'app-todo-item',
  templateUrl: './view-item.component.html',
  styleUrls: ['./view-item.component.scss'],
})

export class ViewItemComponent {
  @Input() itemTitle: string;
  items: TodoItem = {
    list: 'example',
    id: 1,
    title: this.itemTitle,
    description: 'an example list item for the view model',
    completed: false,
  };
}

thanks for the answer.

Upvotes: 0

Views: 1644

Answers (1)

Wingnod
Wingnod

Reputation: 626

export class ViewItemComponent {
  @Input() itemTitle: string;
  item: TodoItem = {
    list: 'example',
    id: 1,
    title: this.itemTitle,
    description: 'an example list item for the view model',
    completed: false,
  };
}

In the above code, the value for 'item' is set to the object literal before you enter any text into your text box. This means 'item.title' will be set to undefined before any input binding can take place.

If you make the itemTitle a setter, you can set the value of 'item.title' every time the user enters input into the text field.

@Input()
set itemTitle(value) {
  this.item.title = value;
}
item: TodoItem = {
  list: 'example',
  id: 1,
  title: 'Default Title',
  description: 'an example list item for the view model',
  completed: false,
};

Alternatively, you can bind the entire todo item object in the add item component.

// add-item.component.html
<div class="item-content" *ngFor="let item of items">
  <app-todo-item [item]="item"></app-todo-item>
</div>

// view-item.component.ts
export class ViewItemComponent {
  @Input()
  item: TodoItem;
}

And use property binding in the template.

// view-item.component.html
<p>ItemID-{{ item.id }}</p>
<p>{{ item.title }}</p>
<p>{{ item.description }}</p>

https://stackblitz.com/edit/angular-gzefwj

Upvotes: 1

Related Questions