File

src/app/materials/lists/lists.component.ts

Implements

OnInit

Metadata

selector	`app-lists`
styleUrls	`./lists.component.scss`
templateUrl	`./lists.component.html`

Index

Properties

folders
links
messages
notes
typesOfShoes

Methods

ngOnInit

Constructor

constructor()

Defined in src/app/materials/lists/lists.component.ts:62

Methods

ngOnInit

ngOnInit()

Defined in src/app/materials/lists/lists.component.ts:66

Returns : void

Properties

folders

Type : any

Default value :

[
    {
      name: 'Photos',
      updated: new Date('1/1/16')
    },
    {
      name: 'Recipes',
      updated: new Date('1/17/16')
    },
    {
      name: 'Work',
      updated: new Date('1/28/16')
    }
  ]

Defined in src/app/materials/lists/lists.component.ts:39

links

Type : string[]

Default value : ['Boots', 'Clogs', 'Loafers', 'Moccasins', 'Sneakers']

Defined in src/app/materials/lists/lists.component.ts:17

messages

Type : []

Default value :

[
    {
      from: '滚动头条',
      subject: '热点君-- 每时每刻滚动更新，轻松纵览天下头条！',
      content: '每时每刻滚动更新，轻松纵览天下头条！'
    },
    {
      from: '读心方程式',
      subject: '东广新闻台',
      content:
        '生活中的心理学，新闻里的小科学，读心方程式，解开你的疑惑。我们不喝鸡汤，只聊干货！节目来源上海东广新闻台《新闻实验室》栏目。'
    },
    {
      from: '话说天下事',
      subject: '天津',
      content:
        '天津人民广播电台新闻台《话说天下事》节目，充分利用新闻台讯信资源的强势，快速点击、精辟分析国际焦点、热点问题、广罗各类新闻。天津味儿的不止有相声，还有《话说天下事》！'
    }
  ]

Defined in src/app/materials/lists/lists.component.ts:19

notes

Type : any

Default value :

[
    {
      name: 'Vacation Itinerary',
      updated: new Date('2/20/16')
    },
    {
      name: 'Kitchen Remodel',
      updated: new Date('1/18/16')
    }
  ]

Defined in src/app/materials/lists/lists.component.ts:53

typesOfShoes

Type : string[]

Default value :

[
    'Boots',
    'Clogs',
    'Loafers',
    'Moccasins',
    'Sneakers'
  ]

Defined in src/app/materials/lists/lists.component.ts:9

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

@Component({
  selector: 'app-lists',
  templateUrl: './lists.component.html',
  styleUrls: ['./lists.component.scss']
})
export class ListsComponent implements OnInit {
  typesOfShoes: string[] = [
    'Boots',
    'Clogs',
    'Loafers',
    'Moccasins',
    'Sneakers'
  ];

  links: string[] = ['Boots', 'Clogs', 'Loafers', 'Moccasins', 'Sneakers'];

  messages = [
    {
      from: '滚动头条',
      subject: '热点君-- 每时每刻滚动更新，轻松纵览天下头条！',
      content: '每时每刻滚动更新，轻松纵览天下头条！'
    },
    {
      from: '读心方程式',
      subject: '东广新闻台',
      content:
        '生活中的心理学，新闻里的小科学，读心方程式，解开你的疑惑。我们不喝鸡汤，只聊干货！节目来源上海东广新闻台《新闻实验室》栏目。'
    },
    {
      from: '话说天下事',
      subject: '天津',
      content:
        '天津人民广播电台新闻台《话说天下事》节目，充分利用新闻台讯信资源的强势，快速点击、精辟分析国际焦点、热点问题、广罗各类新闻。天津味儿的不止有相声，还有《话说天下事》！'
    }
  ];

  folders: any = [
    {
      name: 'Photos',
      updated: new Date('1/1/16')
    },
    {
      name: 'Recipes',
      updated: new Date('1/17/16')
    },
    {
      name: 'Work',
      updated: new Date('1/28/16')
    }
  ];
  notes: any = [
    {
      name: 'Vacation Itinerary',
      updated: new Date('2/20/16')
    },
    {
      name: 'Kitchen Remodel',
      updated: new Date('1/18/16')
    }
  ];

  constructor() {}

  ngOnInit() {}
}

<mat-card>
  <mat-card-title>Simple lists</mat-card-title>
  <mat-card-content>
    <mat-list>
      <mat-list-item> Pepper </mat-list-item>
      <mat-list-item> Salt </mat-list-item>
      <mat-list-item> Paprika </mat-list-item>
    </mat-list>
  </mat-card-content>
</mat-card>

<mat-card>
  <mat-card-title>Navigation lists</mat-card-title>
  <mat-card-content>
    <mat-nav-list>
      <a mat-list-item *ngFor="let link of links"> {{ link }} </a>
    </mat-nav-list>

    <mat-nav-list>
      <mat-list-item *ngFor="let link of links">
        <a matLine>{{ link }}</a>
        <button mat-icon-button>
          <mat-icon>info</mat-icon>
        </button>
      </mat-list-item>
    </mat-nav-list>
  </mat-card-content>
</mat-card>

<mat-card>
  <mat-card-title>Selection lists</mat-card-title>
  <mat-selection-list #shoes>
    <mat-list-option *ngFor="let shoe of typesOfShoes">
      {{shoe}}
    </mat-list-option>
  </mat-selection-list>

  <p>
    Options selected: {{shoes.selectedOptions.selected.length}}
  </p>
</mat-card>

<mat-card>
  <mat-card-title>Multi-line lists</mat-card-title>
  <mat-list>
    <mat-list-item *ngFor="let message of messages">
      <h3 matLine> {{message.from}} </h3>
      <p matLine>
        <span> {{message.subject}} </span>
        <span class="demo-2"> -- {{message.content}} </span>
      </p>
    </mat-list-item>
  </mat-list>

  <mat-list>
    <mat-list-item *ngFor="let message of messages">
      <h3 matLine> {{message.from}} </h3>
      <p matLine> {{message.subject}} </p>
      <p matLine class="demo-2"> {{message.content}} </p>
    </mat-list-item>
  </mat-list>
</mat-card>


<mat-card>
  <mat-card-title> Lists with icons</mat-card-title>
  <mat-card-content>
    <mat-list>
      <mat-list-item *ngFor="let message of messages">
        <mat-icon matListIcon>folder</mat-icon>
        <h3 matLine> {{message.from}} </h3>
        <p matLine>
          <span> {{message.subject}} </span>
          <span class="demo-2"> -- {{message.content}} </span>
        </p>
      </mat-list-item>
    </mat-list>
  </mat-card-content>
</mat-card>

<mat-card>
  <mat-card-title> Lists with avatars </mat-card-title>
  <mat-card-content>
    <mat-list>
      <mat-list-item *ngFor="let message of messages">
        <img matListAvatar src="assets/images/avatars/noavatar.png" alt="assets/images/avatars/noavatar.png">
        <h3 matLine> {{message.from}} </h3>
        <p matLine>
          <span> {{message.subject}} </span>
          <span class="demo-2"> -- {{message.content}} </span>
        </p>
      </mat-list-item>
    </mat-list>
  </mat-card-content>
</mat-card>

<mat-card>
  <mat-card-title> Dense lists </mat-card-title>
  <mat-card-content>
    <mat-list dense>
      <mat-list-item> Pepper </mat-list-item>
      <mat-list-item> Salt </mat-list-item>
      <mat-list-item> Paprika </mat-list-item>
    </mat-list>
  </mat-card-content>
</mat-card>

<mat-card>
  <mat-card-title> Lists with multiple sections </mat-card-title>
  <mat-card-content>
    <mat-list>
      <h3 matSubheader>Folders</h3>
      <mat-list-item *ngFor="let folder of folders">
        <mat-icon matListIcon>folder</mat-icon>
        <h4 matLine>{{folder.name}}</h4>
        <p matLine class="demo-2"> {{folder.updated}} </p>
      </mat-list-item>
      <mat-divider></mat-divider>
      <h3 matSubheader>Notes</h3>
      <mat-list-item *ngFor="let note of notes">
        <mat-icon matListIcon>note</mat-icon>
        <h4 matLine>{{note.name}}</h4>
        <p matLine class="demo-2"> {{note.updated}} </p>
      </mat-list-item>
    </mat-list>
  </mat-card-content>
</mat-card>

./lists.component.scss

mat-card {
  margin: 24px;
}

Legend

Html element

Component

Html element with directive

File

Implements

Metadata

Index

Properties

Methods

Constructor

Methods

Properties

result-matching ""

No results matching ""