CODEWITHSUNDEEP
angular
Rafael Hernández
Rafael Hernández

Reputation: 364

@Viewchild doen't works in angular

the parent and child component I can't call to a method of children's component from parent component to pass a property.

export class PruebabookComponent implements OnInit {

  public identity;
  public token;
  public books: Book[];
  public totalPages;
  public page;
  public next_page;
  public prev_page;
  public number_pages;
  public url: string;
  public bookId;
  public book: Book;
  public _id;
  public takeId;
  @ViewChild(UpdatebookComponent, {static: false}) updateBook: UpdatebookComponent;

  constructor(
    private router: Router,
    private route: ActivatedRoute,
    private userservice: UserService,
    private bookservice: BookService
  ) {
     this.url = global.url;
     this.book = new Book('', '', '', '', 1, '');


}
  


 getId(id)
 {
   // recoger id del libro
   this.bookId = id ;
   this.updateBook.takeId(this.bookId); // here is the ERROR takeId is undefined
   console.log(id);

 }

PruebabookComponent is the parent component updatebookcomponent is the child component.

in updatebookcomponent I have the method

takeId(id)
{
// this.idBook = idbook;
console.log(id);
}

If I put <app-updatebook></app-updatebook> in parent's html @viewchild works but I don't want to show child html on parent html.

pruebabook.component

<div class="col-lag-12">


  <ul class="list-group">
    <li class="list-group-item" *ngFor="let book of books; let i = index">
      <div class="avatar_book">
        <img src="{{ url + 'avatar/' + book.image }}" alt="">
      </div>
    <h4>
      <a [routerLink]="['/inicio']">
        {{book.title}}
      </a>
    </h4>
    <p>{{book.description}}</p>
    <p>{{book.author}}</p>
    <p>{{book.stock}}</p>
    <p>{{book.price}} $</p>
    <a [routerLink]="['/updatebook', i]" (click)="getId(book._id)" class="btn btn-primary float-right">update</a>

   </li>
  </ul>
</div>

Upvotes: 0

Views: 62

Answers (1)

Raz Ronen
Raz Ronen

Reputation: 2628

@ViewChild doesn't work for dynamic loaded components.

You can communicate with the dynamic loaded component via Service or router params.

Upvotes: 2

Related Questions