// component.html
<mat-tab-group (selectedTabChange)="change()" [(selectedIndex)]="index">
  <mat-tab label="fiest">
    Content 1
  <mat-tab label="second">
   Content 2

// component.ts
change() {
  if (this.index === 1) {doSomething();}

New a project with Angular Material

1 Install Node.js and NPM

It is not mandatory to use node.js for developing angular application. You can very well go ahead without node.js for developing angular application but it would not be wise to do so. Let me explain you some of the reasons how node.js makes angular app development process easier for us:

  • Node allows you to spin up a lightweight web server to host your application locally in your system.
  • NPM (Node Package Manager) comes with node.js by default. NPM allows you to manage your dependencies. So, you don’t have to worry for operations like adding a dependency, removing some, updating your package.json.
  • Third and the most important, npm gives you angular cli or ng cli(angular command line interface) . Angular CLI is a great tool for scaffolding your application. So, you don’t need to write boilerplates manually.
  • Angular recommends the use of TypeScript. Now, your browser does not understand TypeScript. It needs to be transpiled to JavaScript. Also, you need to bundle your js files and stylesheets together with the html doc so as to get the web app CLI which is ready to be hosted. Angular CLI helps you to do all these behind the scene. By default, ng cli uses webpack for bundling your application and is very helpful for beginners who have just jumped into web development with angular as it abstracts such complexities.
  • Resource:

2 Install Angular CLI

  npm install -g @angular/cli

3 New Project

IDE: IntelliJ IDEA, or “ng new project-name”

4 Install Angular Material

  ng add @angular/material

5 Use Material component in your project

  • import module in module.ts
  • use component in component.ts