Angular does not provide this functionality out of the box. I think that the simplest way to achieve the desired result is to only display data on every third index like so: <div class=”list-group”> <div *ngFor=”let p of products; let idx = index” > <div class=”row” *ngIf=”idx % 3 === 0″> <app-product [product]=”products[idx]”></app-product> <app-product [product]=”products[idx+1]”></app-product> … Read more
FWIW, in order to get angular 7.x to use the sass package and not try to install node-sass, I had to: remove @angular-devkit/build-angular from my package.json delete node_modules npm install npm i -D sass add back in the 0.13.10 of @angular-devkit/build-angular to package.json npm install again.
You have two options here: 1. You can access parent resolve data via the child’s resolver by creating a child-specific resolver and accessing the route’s parent property. […module.ts | …component.ts] { path: ‘project/:projectId’, component: ProjectDetailComponent, resolve: { project: ProjectResolver } children: [ { path: ‘:projectId/edit’, component: EditProjectComponent, resolve: { edit: EditProjectResolve } } ] } … Read more
This starts to make more sense if you’ve began some dynamic component loading or manual view creation in Angular. OnInit is called once when the component’s @Inputs and @Outputs have been resolved. AfterViewInit is called when the component’s view has been attached. Remember that Angular compiles all views to JS files, not html – the … Read more
Interaction between components can be indeed achieved using services. You will need to inject the service use for inter-component communication into all the components which will need to use it (all the caller components and the callee method) and make use of the properties of Observables. The shared service can look something like this: import … Read more
Option 1: Generating Automatically: You can create a navigation component from templates provided by Material itself using ‘Angular CLI component schematics’ ng generate @angular/material:nav your-component-name The above command will generate a new component that includes a toolbar with the app name and a responsive side nav based on Material breakpoints. See more about angular material … Read more
Boostrap 4 does not support Glyphicons anymore, you can use Font Awesome instead: npm install –save fortawesome/fontawesome-free and add the css File to your .angular-cli.json “apps”: [ { …. “styles”: [ “styles.css”, “../node_modules/bootstrap/dist/css/bootstrap.css”, “../node_modules/font-awesome/css/font-awesome.css” ], … } ] ], Replace CSS class with the Font Awesome classes: <i class=”navbar-toggler-icon fa fa-bars”> </i> recompile app: ng … Read more
private handleError(error: any) { // previously // return Observable.throw(‘Some error information’); // now return throwError(‘Some error information’); } See also How to catch exception correctly from http.request()?
I set up ::ng-deep in component css, it worked in my side. ::ng-deep .mat-expansion-panel-body{ padding: 0; }
ViewChild() works fine on latest plunker Angular version with the scenario you describe. Demonstration in this plunker : https://plnkr.co /edit/KzWnkE5Hvp7NUow6YAxy EDIT: Here is a replacement StackBlitz for the above Plunker: https://stackblitz.com/edit/angular-ivy-pzaglm component : ngAfterViewInit() { console.log(this.testView); // correctly outputs the element in console, not undefined } Check that ElementRef and ViewChild are correctly imported from … Read more