How to install lodash in Angular?
You need to install lodash library along with typings.
npm i --save lodash
npm install --save @types/lodash
Once installed you can import the library in your Angular component.
import * as _ from 'lodash';
Mat Paginator Not Working Inside ngIf
Mat Paginator Not Working Inside ngIf. viewChid is undefined.
In the previous tutorial, you saw how to use pagination in Angular using Mat Paginator. Mat Paginator stops working when inside ngIf.
Here is our existing app.component.html file.
<div class="container"> <table mat-table [dataSource]="dataSource" class="mat-elevation-z8"> <ng-container matColumnDef="name"> <th mat-header-cell *matHeaderCellDef> Name </th> <td mat-cell *matCellDef="let element"> {{element.name}} </td> </ng-container> <ng-container matColumnDef="username"> <th mat-header-cell *matHeaderCellDef> UserName </th> <td mat-cell *matCellDef="let element"> {{element.username}} </td> </ng-container> <ng-container matColumnDef="email"> <th mat-header-cell *matHeaderCellDef> Email </th> <td mat-cell *matCellDef="let element"> {{element.
[Read More]
Turn Off AutoComplete Input | Angular
How to turn autocomplete off in Angular forms?
I tried setting autocomplete="off" on the forms but it didn’t work for me on Chrome version 95.
What worked was setting autocomplete="new-password" on input elements.
<form [formGroup]="formGroup">
<div class="form-group display-flex">
<div>
<input type="text" autocomplete="new-password" formControlName="fName" class="form-control"
placeholder="First Name">
</div>
<div>
<input type="text" autocomplete="new-password" formControlName="lName" class="form-control"
placeholder="Last Name">
</div>
</div>
<div class="form-group display-flex">
<div>
<input type="number" formControlName="age" class="form-control" placeholder="Age">
</div>
<div>
<input type="text" autocomplete="new-password" formControlName="country" class="form-control"
placeholder="Country">
</div>
</div>
<button type="button" (click)="saveForm()" class="btn btn-primary">Submit</button>
</form>
Using Angular Material Mat Table in Angular | Sort | Pagination | Filter
The above video gives a detailed info on how to use Angular Material table component mat-table in your Angular component.
You’ll learn,
How to use Angular Material Table in Angular project How to use Mat Paginator for pagination How to sort table using Mat Sort How to filter content inside Mat table Resources:
Source Code How to Use Angular Material Table Thanks for watching and don’t forget to show some love by liking and sharing the video.
[Read More]
10 Algorithm Books Every Programmer Needs To Check Out
Any programmer needs to be familiar with algorithms. They’re an essential part of modern day coding, and something that you will be expected to know about. They can be incorporated in pretty much any programming language too, including Python or Java. Here are 10 algorithm books that you should check out to learn more.
Introduction to Algorithms by Thomas H. Corman
This is the book that every programmer should have. It’s currently on its third edition, so make sure you have the most recent version.
[Read More]
Angular Date Pipe
How to format date using Date Pipe in Angular? Angular date pipe example usages.
Let’s see how to you can use date pipe in your Angular application to format dates. First let’s have a look at what happens if you don’t use a date pipe to render a date object.
Here is my app.component.ts where I have one date object in variable today.
import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: '.
[Read More]
Angular Material Pagination in Mat Table
How to Use Angular Material Pagination in Mat Table?
Getting Started You can follow the previous tutorial to see how to use Angular material table for listing data fetched from an API.
Pagination Start by importing the MatPaginatorModule in the app.module.ts file.
import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { AppRoutingModule } from './app-routing.module'; import { AppComponent } from './app.component'; import { HttpClientModule } from '@angular/common/http' import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { MatTableModule } from '@angular/material/table'; import { MatPaginatorModule } from '@angular/material/paginator'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, AppRoutingModule, BrowserAnimationsModule, HttpClientModule, MatTableModule, MatPaginatorModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { } Add the material pagination component to your app.
[Read More]
Dropdown Text Overflow | Angular | Angular Material
Dropdown Text Overflow or Select Text Overflow.
In my Angular project which was using Angular material design, I faced an issue where the text in the dropdown was too large. It’s fine when I opened the dropdown but when I selected the large text option, it wasn’t fully visible.
The solution was to shown the text truncated with … at the end and show a tooltip with full text.
<select class="slt-data"> <option>Data One</option> <option>Data Two</option> </select> I did it with the help of CSS.
[Read More]
How to Create Tabs in Angular?
How to Use Angular Material Tabs in Angular ? Creating tabs in your Angular project.
Pre requisites to use Angular Material Tabs in Angular project,
Set up Angular project from scratch Install Bootstrap to the Angular project Add Angular Material to the project Once you have the above pre requisites accomplished, let’s import the MatTabModule in the app.module.ts.
import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { AppRoutingModule } from '.
[Read More]
How to Set Default Tab in Angular?
How to Set Default Tab in Angular? How to change tab in mat-tab-group using selectedIndex dynamically.
Source code from this tutorial can be found at GitHub.
Previously you saw how to create tabs in Angular using Angular Material. Now let’s see how you can set a default tab.
This is how the app.component.html file looks:
<div class="container"> <mat-tab-group mat-align-tabs="start"> <mat-tab label="New Employee" > </mat-tab> <mat-tab label="All Employees" > </mat-tab> </mat-tab-group> </div> You can use selectedIndex property to set the default tab on the tab group.
[Read More]