WEB start
Компьютеры. Интернет. Профессиональное обучение. 055-966-10-17
Наши преимущества
- Наши программы обучения ориентированы на конкретного слушателя. Вы можете обучаться по одной из предложенных Вам программ, а можете самостоятельно составить, откорректировать, откорректировать свою персональную программу обучения. Преподаватель, консультант помогают Вам сориентироваться в материале курса при выборе программы обучения.
- Обучение индивидуальное. Преподаватель проводит занятие только для Вас, ориентируясь на Ваши возможности, предыдущие знания и опыт, скорость восприятия нового материала.
- Вы учитесь в удобное для Вас время, в удобной для Вас форме, может быть выбран гибкий график занятий, в соответствии с Вашими возможностями и пожеланиями.
- Обучение проводится дистанционно. Вы можете обучаться, сидя за Вашим компьютером дома или на работе, не тратя время на поездки к месту обучения.
Регистрация на сайте
Angular 6 directives (part2)
Встроенные директивы Angular (Angular built-in directives)
Примеры
app.modules.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { StudentsComponent } from './students/students.component';
@NgModule({
declarations: [
AppComponent,
StudentsComponent
],
imports: [
BrowserModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
StudentsComponent
import { Component, OnInit } from '@angular/core';
import { StudentsInterface } from '../students-interface';
@Component({
selector: 'app-students',
templateUrl: './students.component.html',
styleUrls: ['./students.component.css']
})
export class StudentsComponent implements OnInit {
students: StudentsInterface[];
constructor() { }
ngOnInit() {
this.students = [
{
name: 'Anna',
id: 1234567,
age: 22,
course: 'Angular'
},
{
name: 'Haim',
id: 987654,
age: 18,
course: 'WEB'
},
{
name: 'Yossy',
id: 456687456,
age: 44,
course: 'C'
},
{
name: 'Vasily',
id: 1234567,
age: 22,
course: 'PHP'
},
{
name: 'Bob',
id: 14312554,
age: 37,
course: 'Photoshop'
},
{
name: 'Bob',
id: 657856784567,
age: 37,
course: 'WEB'
},
];
}
}
StudentsInterface
export interface StudentsInterface {
name: string;
id?: number;
age: number;
course: string;
}
students.component.html
<h1>Students</h1>
<hr>
<h2>Names -all</h2>
<ng-container *ngFor='let student of students; let n = index;'>
<p>{{n}} : {{student.name}}</p>
</ng-container>
<hr>
<h2>WEB students</h2>
<ul *ngFor='let stud of students'>
<li *ngIf='stud.course === "WEB"'>{{stud.course}} -> {{stud.name}}</li>
</ul>
<hr>
<h2>Colored list</h2>
<ul *ngFor='let studnt of students'>
<ng-container [ngSwitch]='studnt.course'>
<div style='color:red' *ngSwitchCase='"WEB"'>Name: {{studnt.name}}, Age: {{studnt.age}}, Course: {{studnt.course}}, Id: {{studnt.id}}</div>
<div style='color:green' *ngSwitchCase='"PHP"'>Name: {{studnt.name}}, Age: {{studnt.age}}, Course: {{studnt.course}}, Id: {{studnt.id}}</div>
<div style='color:blue' *ngSwitchCase='"C"'>Name: {{studnt.name}}, Age: {{studnt.age}}, Course: {{studnt.course}}, Id: {{studnt.id}}</div>
<div style='color:lightgray' *ngSwitchDefault>Name: {{studnt.name}}, Age: {{studnt.age}}, Course: {{studnt.course}}, Id: {{studnt.id}}</div>
</ng-container>
</ul>
