title: How to programatically invoke a method which sets source of *ngFor and render corresponding html
body: <p>I'm working on Angular project. </p>
  
  <p>When users clicks on a categories I need to show corresponding subcategories.</p>
  
  <p>For example by clicking on <strong>Drinks</strong> I need to display: <strong>Coke</strong>, <strong>Fanta</strong>, <strong>Pepsi</strong>...</p>
  
  <p>By clicking on Food for example I need to display: <strong>Burgers</strong>, <strong>Potatoes</strong>, <strong>Fish</strong></p>
  
  <p>And this works when I'm clicking on main groups, subgroups are changing and displaying as expected.</p>
  
  <p>But I would like to set Drinks as Default category, so when I come to a screen I want to see <strong>Drinks</strong> and Coke, <strong>Fanta</strong>, <strong>Pepsi</strong>.. Like I've manually pressed on Drinks..</p>
  
  <p>I've tried to achieve this on next way:</p>
  
  <p><strong><em>step 1:</em></strong></p>
  
  <p>Get data from a database, all main categories, all subcategories, so I might apply filter - based on categoryId - get all subcategories:</p>
  
  <pre><code>export class MainScreenCategories implements OnInit {
  
    @Input() groups: Group[];
    @Input() subGroups: Group[];
    filteredSubGroups: Group[];
    selectedId: string;
    selectedSubId: string;
  
    constructor(
    private _ref: ChangeDetectorRef, 
    private _activatedRoute: ActivatedRoute, 
    private _groupService: GroupService, 
    private _http: HttpClient,
    private _articleService: ArticleService,
    private _globalHelper: GlobalHelperService
    ) { }
  
    ngOnInit() {
      this.selectedId = '78ebcad8-8cb0-4172-8cd8-bb6fb6b3bf53';
      this.groups = this._activatedRoute.snapshot.data['groups'];
      this.subGroups = this._activatedRoute.snapshot.data['subGroups'];
  
      // This is source to my template directive *ngFor - filteredSubGroups
      this.filteredSubGroups = this.subGroups.filter(item =&gt; item.parentId == this.selectedId);
      console.log(this.filteredSubGroups);
  
      //this._ref.detectChanges();
  
      //I've tried adding timeout while fetching data
      //this._groupService.getAll().subscribe(data =&gt; setTimeout(() =&gt; this.groups = data, 0));
      //this._groupService.getAllSubGroups().subscribe(data =&gt; setTimeout(() =&gt; this.subGroups = data, 0));
  
    }
  </code></pre>
  
  <p><strong><em>step 2:</em></strong></p>
  
  <p>Write some HTML to display data:</p>
  
  <pre><code>&lt;div class="tab-pane" id="whatever"&gt;
    &lt;ul&gt;
      &lt;li *ngFor="let subgroup of filteredSubGroups"&gt;
        &lt;button type="button" data-toggle="" data-target="" class="btn categories-btn"&gt;
                  {{subgroup.title | uppercase}}
        &lt;/button&gt;
      &lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>As you can see guys I'm looping <code>filteredSubGroups</code> to display subcategories.</p>
  
  <p>And my <code>console.log(filteredSubGroups)</code> in <code>ngOnInit</code> contains right data also,, but when I run app first time I get this message in my console:</p>
  
  <p><a href="https://i.stack.imgur.com/X0Rx1.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/X0Rx1.png" alt="enter image description here"></a></p>
  
  <p>When I clear console and go to another component's template, and back to this one, I can see in my console there is no errors anymore just 3 subcategories logged there because I said in <code>ngOnInit</code> <code>console.log(filteredSubGroups)</code>, </p>
  
  <p><a href="https://i.stack.imgur.com/8sWJy.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/8sWJy.png" alt="enter image description here"></a></p>
  
  <p>but even if they are logged, they are not visible in html template, and that's biggest problem, I can not figure out why?</p>
  
  <p>Thanks guys</p>
  
  <p>Any kind of help is awesome!</p>