How to add custom angular material theme in angular 6

Styles

Use the MUI CSS helper classes to implement different text styles:

Display4
Display3
Display2
Display1
Headline
Title
Subhead
Body2
Body1
Caption
Menu
Button

div class="mui--text-display4">Display4div>
div class="mui--text-display3">Display3div>
div class="mui--text-display2">Display2div>
div class="mui--text-display1">Display1div>
div class="mui--text-headline">Headlinediv>
div class="mui--text-title">Titlediv>
div class="mui--text-subhead">Subheaddiv>
div class="mui--text-body2">Body2div>
div class="mui--text-body1">Body1div>
div class="mui--text-caption">Captiondiv>
div class="mui--text-menu">Menudiv>
div class="mui--text-button">Buttondiv>

View in new tab »

ngClass и ngStyle

ngClass

Директива ngClass позволяет определить набор классов, которые будут применяться к элементу. В качестве значения она принимает
набор классов в следующем виде:

={
	"класс1": true/false,
	"класс2": true/false,
	...................
}

Например, определим следующий компонент:

import { Component} from '@angular/core';
      
@Component({
    selector: 'my-app',
    template: `
					

Hello Angular 9

Angular 9 представляет модульную архитектуру приложения

`,
styles:
})
export class AppComponent { }

В секции styles у компонента определены два класса, которые устанавливают различные стилевые свойства шрифта: verdanaFont и segoePrintFont.

В шаблоне для привязки класса к элементу применяется директива . Эта директива принимает js-объект, в котором
ключи — это названия классов. Этим названиям присваиваются булевые значения true (если класс применяется) и false (если класс не применяется). То есть в данном
случае класс verdanaFont будет применяться ко всему блоку div.

Однако в блоке div есть параграф, и мы, допустим, хотим, чтобы к этому параграфу применялся другой класс. А по умолчанию вложенный параграф унаследует стили от
родительского блока div и также применяет класс segoePrintFont, в котором можно переопределить унаследованные стили.

Вместо жестко закодированных значений true/false мы можем использовать привязку к выражениям:

import { Component} from '@angular/core';
       
@Component({
    selector: 'my-app',
    template: `
                    

Hello Angular 9

Angular 9 представляет модульную архитектуру приложения

`,
styles:
})
export class AppComponent {
isVerdana = true;
isSegoe = true;
}

В качестве альтернативы мы можем использовать следующие выражения привязки:

Hello Angular 9

Angular 9 представляет модульную архитектуру приложения

Выражение указывает, что класс verdanaFont будет применяться для данного элемента.

Однако с помощью ngClass мы можем задать целый набор классов, которые применяются к элементу:

import { Component} from '@angular/core';
       
@Component({
    selector: 'my-app',
    template: `
                    

Hello Angular 9

Angular 9 представляет модульную архитектуру приложения

`,
styles:
})
export class AppComponent {

isVerdana = true;
isNavy = true;

currentClasses={
verdanaFont: this.isVerdana,
navyColor: this.isNavy
}
}

В данном случае для элемента устанавливаются два класса verdanaFont и navyColor.

ngStyle

Директива ngStyle позволяет задать набор стилей, которые применяются к элементу. В качестве значения директива принимает js-объект,
в котором ключи — названия свойств CSS:

import { Component} from '@angular/core';
      
@Component({
    selector: 'my-app',
    template: `
					

Hello Angular 9

Angular 9 представляет модульную архитектуру приложения

`,
styles:
})
export class AppComponent { }

Аналогично для установки стилей можно применять свойства объекта style:

Hello Angular 9

Angular 9 представляет модульную архитектуру приложения

Также мы можем установить привязку

Динамическое изменение стилей

Директивы ngClass и ngStyle позволяют устанавливать привязку к выражениям, благодаря чему мы можем динамически менять стили или классы. Например:

import { Component} from '@angular/core';
      
@Component({
    selector: 'my-app',
    template: `
					

Hello Angular 9

Angular 9 представляет модульную архитектуру приложения

Toggle`,
styles:
})
export class AppComponent {

visibility: boolean = true;
// переключаем переменную
toggle(){
this.visibility=!this.visibility;
}
}

Выражение устанавливает для класса invisible привязку к значению переменной . По нажатию на кнопку мы можем переключать это свойство,
тем самым управляя видимостью блока.

В качестве альтернативы также можно было бы использовать следующее выражение:

Либо также можно было бы написать так:

НазадВперед

Colors

You can use the CSS color helpers to change the color:

dark
dark-secondary
dark-hint

light
light-secondary
light-hint

accent
accent-secondary
accent-hint
black
white
danger

div class="mui--text-dark">darkdiv>
div class="mui--text-dark-secondary">dark-secondarydiv>
div class="mui--text-dark-hint">dark-hintdiv>
br />
div style="background-color: #444">
  div class="mui--text-light">lightdiv>
  div class="mui--text-light-secondary">light-secondarydiv>
  div class="mui--text-light-hint">light-hintdiv>
div>
br />
div class="mui--text-accent">accentdiv>
div class="mui--text-accent-secondary">accent-secondarydiv>
div class="mui--text-accent-hint">accent-hintdiv>
br />
div class="mui--text-black">blackdiv>
div class="mui--text-white" style="background-color: #444">whitediv>
div class="mui--text-danger">dangerdiv>

View in new tab »

Компонент¶

Компонент — это часть интерфейса приложения с собственной логикой. Вся видимая часть Angular App реализуется с помощью компонентов, поэтому часто можно услышать, что архитектура Angular компонентная.

Ранее уже упоминалось, что за создание компонента отвечает декоратор . Основные свойства объекта, который принимает декоратор:

  • — название компонента;
  • (или ) — HTML-разметка в виде строки (или путь к HTML-файлу);
  • — список сервисов, поставляющих данные для компонента;
  • — массив путей к CSS-файлам, содержащим стили для создаваемого компонента.

Все компоненты в совокупности и есть Angular App.

Using the CDN

With the Google CDN, you will not need to download local copies of the distribution files.
Instead simply reference the CDN urls to easily use those remote library files.
This is especially useful when using online tools such as CodePen, Plunker, or jsFiddle.

head>linkrel="stylesheet"href="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.9/angular-material.min.css">head>body>scriptsrc="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.2/angular.min.js">script>scriptsrc="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.2/angular-animate.min.js">script>scriptsrc="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.2/angular-aria.min.js">script>scriptsrc="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.2/angular-messages.min.js">script>scriptsrc="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.9/angular-material.min.js">script>body>

Action

3d_rotation

accessibility

accessible

account_balance

account_balance_wallet

account_box

account_circle

add_shopping_cart

alarm

alarm_add

alarm_off

alarm_on

all_out

android

announcement

aspect_ratio

assessment

assignment

assignment_ind

assignment_late

assignment_return

assignment_returned

assignment_turned_in

autorenew

backup

book

bookmark

bookmark_outline

bug_report

build

cached

camera_enhanced

card_giftcard

card_membership

card_travel

change_history

check_circle

chrome_reader_mode

class

code

compare_arrows

copyright

credit_card

dashboard

date_range

delete

delete_forever

description

dns

done

done_all

donut_large

donut_small

eject

euro_symbol

event

event_seat

exit_to_app

explore

extension

face

favorite

favorite_border

feedback

find_in_page

find_replace

fingerprint

flight_land

flight_takeoff

flip_to_back

flip_to_front

g_translate

gavel

get_app

gif

grade

group_work

help

help_outline

highlight_off

history

home

hourglass_empty

hourglass_full

http

https

important_devices

info

info_outline

input

invert_colors

label

label_outline

language

launch

lightbulb_outline

line_style

line_weight

list

lock

lock_open

lock_outline

loyalty

markunread_mailbox

motorcycle

note_add

offline_pin

opacity

open_in_browser

open_in_new

open_with

pageview

pan_tool

payment

perm_camera_mic

perm_contact_calendar

perm_data_setting

perm_device_information

perm_identity

perm_media

perm_phone_msg

perm_scan_wifi

pets

picture_in_picture

picture_in_picture_alt

play_for_work

polymer

power_settings_new

pregnant_woman

print

query_builder

question_answer

receipt

record_voice_over

redeem

remove_shopping_cart

reorder

report_problem

restore

restore_page

room

rounded_corner

rowing

schedule

search

settings

settings_applications

settings_backup_restore

settings_bluetooth

settings_brightness

settings_cell

settings_ethernet

settings_input_antenna

settings_input_component

settings_input_composite

settings_input_hdmi

settings_input_svideo

settings_overscan

settings_phone

settings_power

settings_remote

settings_voice

shop

shop_two

shopping_basket

shopping_cart

speaker_notes

speaker_notes_off

spellcheck

star_rate

stars

store

subject

supervisor_account

swap_horiz

swap_vert

swap_vertial_circle

system_update_alt

tab

tab_unselected

theaters

thumb_down

thumb_up

thumbs_up_down

timeline

toc

today

toll

touch_app

track_changes

translate

trending_down

trending_flat

trending_up

turned_in

turned_in_not

update

verified_user

view_agenda

view_array

view_carousel

view_column

view_day

view_headline

view_list

view_module

view_quilt

view_stream

view_week

visibility

visibility_off

watch_later

work

youtube_searched_for

zoom_in

zoom_out

Installing and configuring angular2-materialize with webpack

Install MaterializeCSS and angular2-materialize from npm

npm install materialize-css --savenpm install angular2-materialize --save

MaterializeCSS required jQuery and HammerJS. Check the exact version materialize-css is compatible with:

npm install jquery@^2.2.4 --savenpm install hammerjs --save

Add the Google MD fonts to your index.html:

linkhref="http://fonts.googleapis.com/icon?family=Material+Icons"rel="stylesheet">

Import materialize-css styles:

linkrel="stylesheet"href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.2/css/materialize.min.css">

Add the following plugin to your webpack configuration to provide jQuery:

constProvidePlugin=require('webpack/lib/ProvidePlugin');module.exports={  pluginsnewProvidePlugin({"window.jQuery""jquery",          Hammer"hammerjs/hammer"})};

Import MaterializeCSS programatically, in the same place where you import angular2-materialize module (usually in your main module, or shared module):

import'materialize-css';import{MaterializeModule}from'angular2-materialize';

Another thing you would need to confirm is being able to load web fonts properly:

{ test.(png|woff(2)?|eot|ttf|svg)(\?a-z0-9=\.+)?$, loader'url-loader?limit=100000'},

Notice that the url-loader is required for this to work (npm install it).

Usage

npm install material-steppers --save

note: works with angular 1.4.9

Write your html

md-stepper id="stepper-demo" 
        md-mobile-step-text="$ctrl.isMobileStepText" 
        md-vertical="$ctrl.isVertical" 
        md-linear="$ctrl.isLinear"
        md-alternative="$ctrl.isAlternative">
        md-step md-label="Select a campaign">
            md-step-body>
                p>Step contentp>
            md-step-body>
            md-step-actions>
                md-button class="md-primary md-raised" ng-click="$ctrl.selectCampaign();">Continuemd-button>
                md-button class="md-primary" ng-click="$ctrl.cancel();">Cancelmd-button>
            md-step-actions>
        md-step>
        md-step md-label="Create an group">
            md-step-body>
                p>Step contentp>
            md-step-body>
            md-step-actions>
                md-button class="md-primary md-raised" ng-click="$ctrl.nextStep();">Continuemd-button>
                md-button class="md-primary" ng-click="$ctrl.previousStep();">Backmd-button>
            md-step-actions>
        md-step>
        
    md-stepper>

$mdStepper Service

Used to control a stepper by it’s id. Example:

ver steppers = $mdStepper('stepper-demo');
steppers.next();

Detailed service operations bellow:

Method Description Returns
Complete the current step and move one to the next. Using this method on editable steps (in linear stepper) it will search by the next step without «completed» state to move. When invoked it dispatch the event onstepcomplete to the step element. boolean — True if move and false if not move (e.g. On the last step)
Move to the previous step without change the state of current step. Using this method in linear stepper it will check if previous step is editable to move. boolean — True if move and false if not move (e.g. On the first step)
Move to the next step without change the state of current step. This method works only in optional steps. boolean — True if move and false if not move (e.g. On non-optional step)
Move «active» to specified step id parameter. The id used as reference is the integer number shown on the label of each step (e.g. 2). boolean — True if move and false if not move (e.g. On id not found)
Defines the current step state to «error» and shows the message parameter on title message element.When invoked it dispatch the event onsteperror to the step element. {string} message The error message
Defines the current step state to «normal» and removes the message parameter on title message element. void
Shows a feedback message and a loading indicador. void
Removes the feedback. void
  • Horizontal steppers
  • Vertical steppers
  • Linear steppers
  • Non-linear steppers
  • Alternative labels
  • Optional steps
  • Editable steps
  • Stepper feedback
  • Mobile steppers
    • Mobile step text
    • Mobile step dots
    • Mobile step progress bar
  • Correct apply styles (css) of the material design
  • Embed SVG Icon assets
  • Create a better demo page with all options.

Подключение Material

В продолжении серии статей посвященный monorepo для Angular с Nx, склонируем последний проект common-styles и назовем его theming.

Подключим Hammer.JS в main.ts файл приложения

// main.browser.tsimport { enableProdMode } from '@angular/core';import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';import 'hammerjs';...

Добавляем Material icons в styles/common/fonts.scss

// prettier-ignore@import url(//fonts.googleapis.com/css?family=Roboto:100,300,400,500,700&subset=cyrillic,cyrillic-ext);@import url(//fonts.googleapis.com/icon?family=Material+Icons);

Angular Material для корректной работы анимации требует подключения модуля анимации — BrowserAnimationsModule.

Подключим его в AppBrowserModule (или AppModule, если вы не используете Universal)

@NgModule({imports: ,bootstrap: })export class AppBrowserModule {}

Material по-умолчанию не задет тему оформления. Создадим и зададим тему для приложения.

Для этого создадим папку material в styles и создадим там файл theming.scss

@import '~@angular/material/theming';@include mat-core();$candy-app-primary: mat-palette($mat-indigo);$candy-app-accent: mat-palette($mat-pink, A200, A100, A400);$candy-app-warn: mat-palette($mat-red);$candy-app-theme: mat-light-theme($candy-app-primary, $candy-app-accent, $candy-app-warn);@include angular-material-theme($candy-app-theme);

Подробнее с темизацией Angular Material можно ознакомиться здесь.

Для того, чтобы можно было использовать material переменные и миксины в проекте, добавим импорт в styles/utils.scss

// External variables and mixins@import '~@angular/material/theming';...

Из-за того, что невозможно гарантировать, что абсолютно все приложения в workspace Nx будут использовать material и bootstrap, подключим тему непросредственно в проекте theming, а не на уровне common styles в папке styles/style.scss

В папке проекта apps/frontend/theming/src/styles/style.scss, подключим тему

// Import app utils@import './utils';// Import common material theme@import "styles/material/theme";// Import common styles@import 'styles/style';

После того, как тема была подключена, изменим home module и сделаем вывод home component в стандартных компонента Angular Material.

В файле home.common.ts уберем последние преобразования с layouts и оставим просто home component

import { Routes } from '@angular/router';import { HomeComponent } from './containers/home/home.component';export const homeContainers: any[] = ;export const homeRoutes: Routes = ;

Подключим модуль Material Card в home module

import { NgModule } from '@angular/core';import { CommonModule } from '@angular/common';import { MatCardModule } from '@angular/material';import { RouterModule } from '@angular/router';import { TranslateModule } from '@ngx-translate/core';import { homeContainers, homeRoutes } from './home.common';@NgModule({imports: ,declarations: })export class HomeModule {}

И выведем card в home.component.html

div class="home-page">h2>{{ 'home.title' | translate }}h2>mat-card class="home-card">div class="home-langs">button type="button" (click)="translationFacade.setLanguage('ru')">RUbutton> /button type="button" (click)="translationFacade.setLanguage('en')">Enbutton>div>div class="home-title">{{ 'home.count' | translate }}: {{ counter }}div>div class="home-actions">button type="btn btn-default home-action" (click)="add()">        {{ 'home.actions.add' | translate }}button>div>mat-card>div>

Добавим стили, чтобы карточка не сливалась с фоном

@import 'utils';:host {background-color: mat-color($mat-gray, 200);display: block;height: 100vh;}.home-page {padding: 1rem 2rem;}

Запустим проект и посмотрим, что получилось

ng serve frontend-theming

Adding angular material

Great now that we are sure the application loaded, you can stop it pressing “Ctrl + c” in the console you are running it, so we can add Angular Material to our application through the schematics.

ng add @angular/material

And make sure you select the following options for the questions.

The first question will ask if you want to use one of the pre-built themes or use your own, in this case we are going to create our own theme.

The second question is to enable the gesture recognition particularly helpful for mobile applications, for this HammerJS will be added to the list of libraries in the package.json and in the application configuration.

Finally the last question is if you want to enable the angular default animations, lets leave it so we can have the full functionality for now.

For more information about the Angular material installation you can check Getting Started Angular Material

Now open your favorite IDE or Text Editor in the application folder, I recommend to use VS Code, to open it from the terminal in the current location just execute:

code .

Once the IDE opens, navigate to the “styles.scss”

Here you can see the main configuration parts for the theme, and you will have the inline comments which will help you understanding each step.

If you want to know more about material theming and palettes look at the following link.

Adding Material Components

In your IDE navigate to the file “src/app/app.module.ts”, and import the following modules:

import { MatInputModule, MatButtonModule, MatSelectModule, MatIconModule } from '@angular/material';import { FormsModule } from '@angular/forms';

And then add them to the imports array:

imports: ,

Each component that you want to use requires you to import the respective module of it, you can check the Angular Material documentation to know the name of the Module for each component, usually at the top of their API section.

The next step is to add some components, so go to “src/app/app.component.html” and add the following code:

Each one of the components had specific properties some of them are:

  • input field, that needs to be inside of the “mat-form-field”, the is to make the two-way binding with the variable title that it’s also present in the h1.
  • mat-icon, where you can change the icon by simply setting the inner text with any of the icons that are provided, you can find the icon list in here https://material.io/icons/
  • raised button, a normal button with a shadow effect.
  • The select is loading a list of items and creating some options from them, the list of items is declared in the class.

Navigate to the file “src/app/app.component.ts” and make sure the variables title, selectedValue, and items, are defined like in the following gist.

You can check a full list of available components with code examples, and api definition in the following page: https://material.angular.io/components

Running the application

So now you have Angular and Angular material, is time to add some components and see them live, for this first go to the terminal and run application.

ng serve

or you can use the flag — open to open your default browser:

ng serve --open

Amazing! You now have an Angular Application with some Material components. But as you might imagine there are still a lot components to learn and configuration that can make your experience developing applications even better, for that I can recommend you to go to the following links:

  • https://github.com/angular/angular
  • https://github.com/angular/angular-cli
  • https://github.com/angular/material2
  • https://material.angular.io/

Usage

Add the following plugin configuration in the Webpack configuration:

newCopyWebpackPlugin({ from'node_modules/@mdi/angular-material/mdi.svg',    to'assets/mdi.svg'});

Or if you’re using Angular CLI:

  • For Angular CLI version 1.x, make sure to include in your folder under in the array:

    {"apps"{"assets"{"glob""**/*","input""./assets/","output""./assets/"},{"glob""favicon.ico","input""","output"""},{"glob""mdi.svg","input""../node_modules/@mdi/angular-material","output""./assets"}}}
  • For Angular CLI version 6.x, make sure to include in your folder under in the array, located in the build configuration for your project:

    {..."architect"{"build"{"options"{"assets"{"glob""**/*","input""./assets/","output""./assets/"},{"glob""favicon.ico","input""","output"""},{"glob""mdi.svg","input""../node_modules/@mdi/angular-material","output""./assets"}}}}...}

Note: To check your version of Angular CLI, run or .

  1. Place the SVG file under your folder thanks to Angular CLI or thanks to . Please ensure that this file is publicly accessible.
  2. In your app’s main module (typically ), import and from :
import{BrowserModule}from'@angular/platform-browser';import{BrowserAnimationsModule}from'@angular/platform-browser/animations';import{NgModule}from'@angular/core';import{MatIconRegistry,MatIconModule}from'@angular/material';import{DomSanitizer}from'@angular/platform-browser';import{HttpClientModule}from'@angular/common/http';@NgModule({importsBrowserModule,BrowserAnimationsModule,HttpClientModule,MatIconModule})exportclassAppModule{constructor(matIconRegistryMatIconRegistry,domSanitizerDomSanitizer){matIconRegistry.addSvgIconSet(domSanitizer.bypassSecurityTrustResourceUrl('./assets/mdi.svg'));}}

Usage:

mat-iconsvgIcon="android"aria-label="Android icon">mat-icon>amat-icon-buttonhref="https://android.com"matTooltip="Go to Android.com"aria-label="Go to Android.com">mat-iconsvgIcon="android"aria-label="Android icon">mat-icon>button>buttonmat-button>mat-iconsvgIcon="code-tags"aria-label="Code icon">mat-icon>  View sourcebutton>

Please also add the following class to your styles () to solve the problem where an icon isn’t aligned properly when used in a menu item:

button.mat-menu-item{line-height24px!important;}a.mat-menu-item > mat-icon{margin-bottom14px;}.mat-iconsvg{height24px;width24px;}
var app =angular.module('myApp','ngMaterial');app.config(function($mdIconProvider){  $mdIconProvider.defaultIconSet('assets/mdi.svg')});
md-iconmd-svg-icon="android">md-icon>md-buttonaria-label="Android"class="md-icon-button">md-iconmd-svg-icon="android">md-icon>md-button>

Device

access_alarms

access_alarm

access_time

add_alarm

airplanemode_on

airplanemode_inactive

battery_charging_full

battery_full

battery_std

battery_unknown

bluetooth

bluetooth_connected

bluetooth_disabled

bluetooth_searching

brightness_auto

brightness_high

brightness_low

brightness_medium

data_usage

developer_mode

devices

dvr

gps_fixed

gps_not_fixed

gps_off

graphic_eq

location_disabled

location_searching

network_cell

network_wifi

nfc

screen_lock_landscape

screen_lock_portrait

screen_lock_rotation

screen_rotation

sd_storage

settings_system_daydream

signal_cellular_4_bar

signal_cellular_connected_no_internet_4_bar

signal_cellular_no_sim

signal_cellular_null

signal_cellular_off

signal_wifi_4_bar

signal_wifi_4_bar_lock

signal_wifi_off

storage

usb

wallpaper

wifi_lock

wifi_tethering

Av

add_to_queue

airplay

album

art_track

av_timer

branding_watermark

call_to_action

closed_caption

equalizer

explicit

fast_forward

fast_rewind

featured_play_list

featured_video

fibre_dvr

fiber_manual_record

fibre_new

fibre_pin

fibre_smart_record

forward_10

forward_30

forward_5

games

hd

hearing

high_quality

my_library_add

my_library_books

my_library_music

loop

mic

mic_none

mic_off

movie

music_video

new_releases

not_interested

note

pause

pause_circle_filled

pause_circle_outline

play_arrow

play_circle_fill

play_circle_outline

playlist_add

playlist_add_check

playlist_play

queue

queue_music

queue_play_next

radio

recent_actors

remove_from_queue

repeat

repeat_one

replay

replay_10

replay_30

replay_5

shuffle

skip_next

skip_previous

slow_motion_video

snooze

sort_by_alpha

stop

subscriptions

subtitles

surround_sound

video_call

video_label

video_library

videocam

videocam_off

volume_down

volume_mute

volume_off

volume_up

web

web_asset

Hardware

cast

cast_connected

computer

desktop_mac

desktop_windows

developer_dashboard

device_hub

devices_other

dock

gamepad

headset

headset_mic

keyboard

keyboard_arrow_down

keyboard_arrow_left

keyboard_arrow_right

keyboard_arrow_up

keyboard_backspace

keyboard_capslock

keyboard_hide

keyboard_return

keyboard_tab

keyboard_voice

laptop

laptop_chromebook

laptop_mac

laptop_windows

memory

mouse

phone_android

phone_iphone

phonelink

phonelink_off

power_input

router

scanner

security

sim_card

smartphone

speaker

speaker_group

tablet

tablet_android

tablet_mac

toys

tv

vidiogame_asset

watch

Material Design Spec

You can combine style and color helpers to implement the Material Design typography spec:

Display4
Display3
Display2
Display1
Headline
Title
Subhead
Body2
Body1
Caption
Menu
Button

Display4
Display3
Display2
Display1
Headline
Title
Subhead
Body2
Body1
Caption
Menu
Button

Display4
Display3
Display2
Display1
Headline
Title
Subhead
Body2
Body1
Caption
Menu
Button

div class="mui--text-dark-secondary mui--text-display4">Display4div>
div class="mui--text-dark-secondary mui--text-display3">Display3div>
div class="mui--text-dark-secondary mui--text-display2">Display2div>
div class="mui--text-dark-secondary mui--text-display1">Display1div>
div class="mui--text-dark mui--text-headline">Headlinediv>
div class="mui--text-dark mui--text-title">Titlediv>
div class="mui--text-dark mui--text-subhead">Subheaddiv>
div class="mui--text-dark mui--text-body2">Body2div>
div class="mui--text-dark mui--text-body1">Body1div>
div class="mui--text-dark-secondary mui--text-caption">Captiondiv>
div class="mui--text-dark mui--text-menu">Menudiv>
div class="mui--text-dark mui--text-button">Buttondiv>

div style="background-color: #444">
  div class="mui--text-light-secondary mui--text-display4">Display4div>
  div class="mui--text-light-secondary mui--text-display3">Display3div>
  div class="mui--text-light-secondary mui--text-display2">Display2div>
  div class="mui--text-light-secondary mui--text-display1">Display1div>
  div class="mui--text-light mui--text-headline">Headlinediv>
  div class="mui--text-light mui--text-title">Titlediv>
  div class="mui--text-light mui--text-subhead">Subheaddiv>
  div class="mui--text-light mui--text-body2">Body2div>
  div class="mui--text-light mui--text-body1">Body1div>
  div class="mui--text-light-secondary mui--text-caption">Captiondiv>
  div class="mui--text-light mui--text-menu">Menudiv>
  div class="mui--text-light mui--text-button">Buttondiv>
div>

div class="mui--text-accent-secondary mui--text-display4">Display4div>
div class="mui--text-accent-secondary mui--text-display3">Display3div>
div class="mui--text-accent-secondary mui--text-display2">Display2div>
div class="mui--text-accent-secondary mui--text-display1">Display1div>
div class="mui--text-accent mui--text-headline">Headlinediv>
div class="mui--text-accent mui--text-title">Titlediv>
div class="mui--text-accent mui--text-subhead">Subheaddiv>
div class="mui--text-accent mui--text-body2">Body2div>
div class="mui--text-accent mui--text-body1">Body1div>
div class="mui--text-accent-secondary mui--text-caption">Captiondiv>
div class="mui--text-accent mui--text-menu">Menudiv>
div class="mui--text-accent mui--text-button">Buttondiv>

View in new tab »

Complete Example

my-app
|
|--src
|   |
|   |--app 
|   |   |
|   |   |--article.component.ts
|   |   |--article.component.html
|   |   |--article.ts
|   |   |--article.service.ts
|   |   |
|   |   |--app.component.ts
|   |   |--app.module.ts 
|   | 
|   |--main.ts
|   |--index.html
|   |--styles.css
|
|--node_modules
|--package.json 

article.component.ts

import { Component, OnInit, ViewChild } from '@angular/core';
import { MatTableDataSource, MatSort, MatPaginator } from '@angular/material';
import { ArticleService } from './article.service';

@Component({
    selector: 'app-article',
    templateUrl: './article.component.html'
})
export class ArticleComponent implements OnInit {
    @ViewChild(MatSort) sort: MatSort;
    @ViewChild(MatPaginator) paginator: MatPaginator;    

    constructor(private articleService: ArticleService) {}
    
    displayedColumns: string[] = ;
    dataSource = new MatTableDataSource(this.articleService.getAllArticles());
  
    ngOnInit() {
      this.dataSource.sort = this.sort;
      this.dataSource.paginator = this.paginator;
    }    
} 

article.component.html

&ltdiv class="mat-elevation-z8"&gt
  &lttable mat-table ="dataSource" matSort class="mat-elevation-z8"&gt
    &lt!-- Id Column --&gt
    &ltng-container matColumnDef="id"&gt
      &ltth mat-header-cell *matHeaderCellDef mat-sort-header&gt No. &lt/th&gt
      &lttd mat-cell *matCellDef="let element"&gt {{element.id}} &lt/td&gt
    &lt/ng-container&gt
  
    &lt!-- Title Column --&gt
    &ltng-container matColumnDef="title"&gt
      &ltth mat-header-cell *matHeaderCellDef mat-sort-header&gt Title &lt/th&gt
      &lttd mat-cell *matCellDef="let element"&gt {{element.title}} &lt/td&gt
    &lt/ng-container&gt
  
    &lt!-- Category Column --&gt
    &ltng-container matColumnDef="category"&gt
      &ltth mat-header-cell *matHeaderCellDef mat-sort-header&gt Category &lt/th&gt
      &lttd mat-cell *matCellDef="let element"&gt {{element.category}} &lt/td&gt
    &lt/ng-container&gt
  
    &lt!-- Writer Column --&gt
    &ltng-container matColumnDef="writer"&gt
      &ltth mat-header-cell *matHeaderCellDef mat-sort-header&gt Writer &lt/th&gt
      &lttd mat-cell *matCellDef="let element"&gt {{element.writer}} &lt/td&gt
    &lt/ng-container&gt
  
    &lttr mat-header-row *matHeaderRowDef="displayedColumns"&gt&lt/tr&gt
    &lttr mat-row *matRowDef="let row; columns: displayedColumns;"&gt&lt/tr&gt
  &lt/table&gt
  &ltmat-paginator ="" showFirstLastButtons&gt&lt/mat-paginator&gt
&lt/div&gt 

article.ts

export interface Article {
    id: number;
    title: string;
    category: string;
    writer: string;
} 

article.service.ts

import { Injectable } from '@angular/core';
import { Article } from './article';

const All_ARTICLES: Article[] = ;

@Injectable({
   providedIn: 'root'
})
export class ArticleService {
   getAllArticles() {
       return All_ARTICLES;
   }
} 

app.component.ts

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

@Component({
  selector: 'app-root',
  template: `
    &ltapp-article&gt&lt/app-article&gt
  ` 
})
export class AppComponent {
} 

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatTableModule } from '@angular/material/table';
import { MatSortModule } from '@angular/material/sort';
import { MatPaginatorModule } from '@angular/material/paginator';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { ArticleComponent } from './article.component';

@NgModule({
  declarations: ,
  imports: ,
  providers: [],
  bootstrap: 
})
export class AppModule { } 

styles.css

@import "~@angular/material/prebuilt-themes/indigo-pink.css";

table {
    width: 100%;
} 

Custom

signal_wifi_0_bar

signal_wifi_1_bar

signal_wifi_2_bar

signal_wifi_3_bar

signal_cellular_connected_no_internet_0_bar

signal_cellular_connected_no_internet_1_bar

signal_cellular_connected_no_internet_2_bar

signal_cellular_connected_no_internet_3_bar

signal_cellular_0_bar

signal_cellular_1_bar

signal_cellular_2_bar

signal_cellular_3_bar

now_wallpaper

now_widgets

battery_20

battery_30

battery_50

battery_60

battery_80

battery_90

battery_alert

battery_charging_20

battery_charging_30

battery_charging_50

battery_charging_60

battery_charging_80

battery_charging_90

account_child

Модуль¶

Разберем модули, именно с них начинается проектирование архитектуры Angular приложения. Каждый из них имеет собственный набор структурных элементов:

  • — отвечает за часть web-страницы и включает в себя HTML-шаблон, CSS-стили и логику поведения;
  • — поставщик данных для ;
  • — преобразует определенную часть DOM заданным образом.

Все вышеперечисленное собирается в корневой модуль, который общепринято называется .

Корневой модуль может быть только один, но он может использовать функционал других модулей, объявленных в объекте декоратора в свойстве .

— это декоратор, который принимает описывающий модуль объект.

Перечень свойств объекта:

  • — компоненты (Component), директивы (Directive) и фильтры (Pipe) корневого модуля;
  • — компоненты, сервисы, директивы и фильтры, доступные для использования разработчикам, которые будут использовать ваш модуль в своих разработках;
  • — другие модули, используемые в корневом модуле;
  • — сервисы (Service) приложения;
  • — имя главного компонента приложения (как правило, называется ).

Далее рассказано, как создать полноценный функциональный модуль, который может быть использован другими разработчиками.

Ссылка на основную публикацию