angular5 – Page 2 – Tarik Billa

Angular component default style css display block

December 4, 2023 by Tarik

My pull-request has been merged. With the upcoming release of Angular CLI v9.1.0 a new option is going to be available: –displayBlock=true|false Docs: https://next.angular.io/cli/generate#component For the impatient: It’s available right now in v9.1.0-next.0 When using the CLI: ng generate component dashboard –displayBlock=true Settting a default value in angular.json: … “projectType”: “application”, “schematics”: { “@schematics/angular:component”: { … Read more

Angular 5 – add style to specific element dynamically

November 26, 2023 by Tarik

I’m super late to this party, but NO! DO NOT USE DOCUMENT.QUERYSELECTOR. That is NOT how you style an Angular DOM element! <div [ngStyle]=”{‘top.px’: divStyle}”> Then in your component, you have ngAfterViewInit() { this.divStyle = 200; }

cannot determine the module for component angular 5

September 26, 2023 by Tarik

Check Case Sensitivity import { MyComponent } from “./User/my-component”; In my case, the problem was that the folder user was created with U as capital in my import statement. But actually, on disk, it was in small-case. When I changed the pathname to user (with u lower case) in my import statement, it worked for … Read more

How can I get all the rows of ag-grid?

August 29, 2023 by Tarik

I don’t think there is such a method but you can make your own: getAllRows() { let rowData = []; this.gridApi.forEachNode(node => rowData.push(node.data)); return rowData; }

Angular5 – TypeError: Cannot read property ‘template’ of undefined

August 27, 2023 by Tarik

I forgot to define the header cell for the actions. So it was throwing that error. Here is the code which solved this problem. <ng-container matColumnDef=”actions”> <mat-header-cell *matHeaderCellDef></mat-header-cell> <mat-cell *matCellDef=”let row”> <button mat-button (click)=”showDetails(row)”>DETAILS</button> <button mat-button (click)=”editItem(row)”>EDIT</button> <button mat-button (click)=”deleteItem(row)”>DELETE</button> </mat-cell> </ng-container>

Angular material Paginator is not working

August 26, 2023 by Tarik

Just in case someone else runs into this problem, all it takes is importing the module in app.module.ts import { MatPaginatorModule } from ‘@angular/material/paginator’; and @NgModule({ … imports: [ …. MatPaginatorModule ]

Use process.env in Angular 5 environment

August 25, 2023 by Tarik

Update Per the comments below the original answer was not entirely clear — Angular is built with Angular CLI, which is a node application, but you aren’t able to access process.env directly from within the app during that build process, as it’s not processed as a Node application. The concepts stay pretty much the same, … Read more

How to update / upgrade from Angular 4 to Angular 5+

August 17, 2023 by Tarik

This specific problem was fixed with Node version update. I had to update Node version, sudo apt-get install nodejs npm uninstall -g @angular/cli npm cache clean npm install -g @angular/cli@latest ng new ProjectName node –version ==> 8.9.0 ng –version ==> 1.5.0 “dependencies”: { “@angular/animations”: “^5.0.0”, “@angular/common”: “^5.0.0”, “@angular/compiler”: “^5.0.0”, “@angular/core”: “^5.0.0”, “@angular/forms”: “^5.0.0”, “@angular/http”: “^5.0.0”, … Read more

Update to Angular 5

August 5, 2023 by Tarik

As Now, angular 5 has been released officially on 1st Novemebr 2017, So for those who want to update your old angular applications to angular 5: 1) The Angular team has also put a handy tool to make upgrading from any version to angular 5, as simple as possible. 2) You will have to upgrade … Read more

How to set color of toggle buttons

August 4, 2023 by Tarik

matButtonToggle does not support the color property like matButton. You can use the css classes .mat-button-toggle and .mat-button-toggle-checked to style the different states. With material theming you can extract whichever individual palettes you need from the theme and apply the backgrounds default-contrast color to the text color to achieve optimal contrast with light or dark … Read more