How to create a custom component in Angular Material 2

Question

Is there a standard way to create your own component on top of Angular Material 2 or extend an existing component.

I used to use the Sencha / ExtJS platform, and it was quite simple to create my own component on the base EXTJS component, expanding it.

I looked at the Angular Material 2 CDK, but there is no documentation on creating a custom component on top of it.

Answer 1

This article provides an excellent explanation and example regarding CDK.

CDK - . Angular Material Design.

CDK , , overlay, stepper table. , CDK .

material2, , , . ViewEncapsulation.

, <md-tab>, :

Typescript:

import {Component, ViewEncapsulation} from '@angular/core';

@Component({
  ....
  encapsulation: ViewEncapsulation.None
})

css:

/* Styles for tab labels */
.mat-tab-label {
    min-width: 25px !important;
    padding: 5px;
    background-color: transparent;
    color: red;
    font-weight: 700;
}

/* Styles for the active tab label */
.mat-tab-label.mat-tab-label-active {
    min-width: 25px !important;
    padding: 5px;
    background-color: transparent;
    color: red;
    font-weight: 700;
}

/* Styles for the ink bar */
.mat-ink-bar {
    background-color: green;
}

.

Answer 2

angular -cli.

$ ng g m customComponent

.

$ ng g c customComponent

( ). exports imports:

exports: [CustomComponentComponent]

, , CustomComponentModule .