WEB start
Компьютеры. Интернет. Профессиональное обучение. 055-966-10-17
Наши преимущества
- Наши программы обучения ориентированы на конкретного слушателя. Вы можете обучаться по одной из предложенных Вам программ, а можете самостоятельно составить, откорректировать, откорректировать свою персональную программу обучения. Преподаватель, консультант помогают Вам сориентироваться в материале курса при выборе программы обучения.
- Обучение индивидуальное. Преподаватель проводит занятие только для Вас, ориентируясь на Ваши возможности, предыдущие знания и опыт, скорость восприятия нового материала.
- Вы учитесь в удобное для Вас время, в удобной для Вас форме, может быть выбран гибкий график занятий, в соответствии с Вашими возможностями и пожеланиями.
- Обучение проводится дистанционно. Вы можете обучаться, сидя за Вашим компьютером дома или на работе, не тратя время на поездки к месту обучения.
Регистрация на сайте
Angular директивы (2)
Примеры Angular директив
(Angular built in directives)
<H1>Students</H1>
<table>
<tr>
<th>N</th>
<th>Name</th>
<th>Age</th>
<th>Course</th>
</tr>
<tr *ngFor='let student of students; let n = index'>
<td>{{n+1}}</td>
<td>Name: {{student['Name']}}</td>
<td>Age: {{student['Age']}}</td>
<td>Course: {{student['Course']}}</td>
</tr>
</table>
<hr>
<h1>WEB students</h1>
<table>
<tr>
<th>N</th>
<th>Name</th>
<th>Age</th>
<th>Course</th>
</tr>
<ng-container *ngFor='let item of students; let n = index'>
<tr *ngIf="item['Course'] == 'WEB'">
<td>{{n+1}}</td>
<td>Name: {{item['Name']}}</td>
<td>Age: {{item['Age']}}</td>
<td>Course: {{item['Course']}}</td>
</tr>
</ng-container>
</table>
<hr>
<ng-container *ngFor='let student of students'>
<div *ngIf="student['Age'] >= 20; then adult; else child">this is ignored</div>
<ng-template #adult>Adult: {{student['Name'] + ' Age:' + student['Age'] }}<br></ng-template>
<ng-template #child>Child: {{student['Name'] + ' Age:' + student['Age'] }}<br></ng-template>
</ng-container>
<hr>
<ng-container *ngFor='let student of students; let n = index'>
{{n + 1}}
<ng-container [ngSwitch]='student["Course"]'>
<div *ngSwitchCase='"WEB"' style='color:red'>
WEB : {{student['Name']}}<br>
</div>
<div *ngSwitchCase='"PHP"' style='color:green'>
PHP : {{student['Name']}}<br>
</div>
<div *ngSwitchCase='"C++"' style='color:blue'>
C++ : {{student['Name']}}<br>
</div>
</ng-container>
</ng-container>
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-students',
templateUrl: './students.component.html',
styleUrls: ['./students.component.css']
})
export class StudentsComponent implements OnInit {
students = [];
constructor() { }
ngOnInit() {
this.students = [
{'Name': 'Ivan', 'Age': '25', 'Course': 'WEB'},
{'Name': 'Haim', 'Age': '20', 'Course': 'PHP'},
{'Name': 'Kate', 'Age': '19', 'Course': 'C++'},
{'Name': 'Ivan', 'Age': '25', 'Course': 'WEB'},
{'Name': 'Haim', 'Age': '30', 'Course': 'PHP'},
{'Name': 'Kate', 'Age': '19', 'Course': 'C++'},
{'Name': 'Ivan', 'Age': '16', 'Course': 'WEB'},
{'Name': 'Haim', 'Age': '33', 'Course': 'PHP'},
{'Name': 'Kate', 'Age': '10', 'Course': 'C++'}
];
console.log(this.students);
}
}
