How to programatically invoke a method which sets source of *ngFor and render corresponding html
I'm working on Angular project.
When users clicks on a categories I need to show corresponding subcategories.
For example by clicking onDrinksI need to display:Coke,Fanta,Pepsi...
By clicking on Food for example I need to display:Burgers,Potatoes,Fish
And this works when I'm clicking on main groups, subgroups are changing and displaying as expected.
But I would like to set Drinks as Default category, so when I come to a screen I want to seeDrinksand Coke,Fanta,Pepsi.. Like I've manually pressed on Drinks..
I've tried to achieve this on next way:
step 1:
Get data from a database, all main categories, all subcategories, so I might apply filter - based on categoryId - get all subcategories:
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 => item.parentId == this.selectedId);
console.log(this.filteredSubGroups);
//this._ref.detectChanges();
//I've tried adding timeout while fetching data
//this._groupService.getAll().subscribe(data => setTimeout(() => this.groups = data, 0));
//this._groupService.getAllSubGroups().subscribe(data => setTimeout(() => this.subGroups = data, 0));
}
step 2:
Write some HTML to display data:
<div class="tab-pane" id="whatever">
<ul>
<li *ngFor="let subgroup of filteredSubGroups">
<button type="button" data-toggle="" data-target="" class="btn categories-btn">
{{subgroup.title | uppercase}}
button>
li>
ul>
div>
As you can see guys I'm loopingfilteredSubGroupsto display subcategories.
And myconsole.log(filteredSubGroups)inngOnInitcontains right data also,, but when I run app first time I get this message in my console:
ERROR TypeError: Cannot read property 'filter' of null
at MainScreenGroupSubgroupComponent.ngAfterViewInit (main-screen-group-subgroup.component.ts:41)
at callProviderLifecycles (core.js:12748)
at callElementProvidersLifecycles (core.js:12715)
at callLifecycleHooksChildrenFirst (core.js:12698)
at checkAndUpdateView (core.js:13853)
at callViewAction (core.js:14195)
at execComponentViewsAction (core.js:14127)
at checkAndUpdateView (core.js:13850)
at callViewAction (core.js:14195)
at execEmbeddedViewsAction (core.js:14153)
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 inngOnInitconsole.log(filteredSubGroups),
but even if they are logged, they are not visible in html template, and that's biggest problem, I can not figure out why?
Thanks guys
Any kind of help is awesome!
As you can see I've tried with ref changes, and with timeout but that didn't worked somehow :(
