Month: 2020年3月

使用selectedTabChange方法结合selectedIndex可实现。

selectedTabChange监听tabs是否切换，selectedIndex返回被选中tab的索引。

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

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

将button设置为type = “submit”，且input标签与进入下一步的按钮之间没有其他按钮。

在输入框按下enter会触发最近按钮(type = “submit”)的事件。

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: https://www.quora.com/Why-does-Angular-2-need-Node-js

2 Install Angular CLI

  npm install -g @angular/cli

3 New Project

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