1
\$\begingroup\$

I am using WP REST API V2 with Angular v5.

I am display all items available from API for /do route inside WeDoComponent component.

Now I want to use same component - <app-wedo> inside another component with restricted numbers of items.

To do so, I have added one attribute loadOnly inside HTML template of HomeComponent and I am instantiate service under constructor and using this reference with ngOnInit life-cycle hook.

HTML Template with loadOnly attribute

<app-we-do loadOnly="3"></app-we-do>

I just wanted to verify if the approach below is right considering best practices in Angular or would that be affecting performance in negative way or somehow bad for a project... Any input would be appreciated.

Thanks in advance :)

WeDoComponentCode

import { Component, OnInit, Input } from '@angular/core';
import { ApiService } from '../services/api.service';

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

export class WeDoComponent implements OnInit {
  weDo;
  loading: boolean = true;
  @Input('loadOnly') loadOnly;

  constructor(private musicService: ApiService) {}

  ngOnInit() {
    let _self = this;
    if (_self.loadOnly) {
      _self.musicService.getAPIData('services?embed&per_page=' + _self.loadOnly).subscribe(res => this.weDo = res);
    } else {
      _self.musicService.getAPIData('services').subscribe(res => this.weDo = res);
    }
    console.log('_self: ', _self);
  }

}
\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.