bxnotes.ru
  • конспекты
  • статьи
Angular в конспектах Angular Bitrix в конспектах Bitrix Git в конспектах Git Js в конспектах Js Linux в конспектах Linux MySQL в конспектах MySQL Php в конспектах Php React в конспектах React
Angular в статьях Angular Bitrix в статьях Bitrix Git в статьях Git Js в статьях Js Linux в статьях Linux MySQL в статьях MySQL Php в статьях Php React в статьях React
Главная
Статьи
frameworks
angular
Добавление данных в Компонент
Статья из конспекта "Angular 5 - The Complete Guide":
  • Установка и первый запуск
  • Тестирование возможностей
  • TypeScript, Bootstrap, Main.ts
  • Создание компонентов
  • Шаблон и стили компонента
  • Компонент и данные
  • События
  • Динамические шаблоны в Angular5
  • Angular CSS и Style
  • Директива ngFor
  • Компонент и модель
  • Добавление данных в Компонент
  • Создание общей модели
  • Отладка
  • Связывание свойств и событий
  • Инкапсуляция стилей и ссылки
  • ng-content
  • События и жизненный цикл
  • Навигация
  • Передача данных событиями
  • Директива атрибута
  • HostListener и HostBinding
  • Binding свойств директив
  • Структурные директивы
  • Сервисы
  • JS операторы
  • Route
  • Route (переключение и параметры)
  • Обновление шаблона
  • Route продолжение
  • Вынос настроек роутера
  • Защита роутера
  • Контроль навигации с помощью сервиса
  • Route и статика
  • Route Resolving
  • Observable
  • Unsubscribe
  • Subject
  • Формы
  • Формы. Шаблонный подход.
  • Формы. Реактивный подход.

Добавление данных в Компонент

Импорт модели в Angular

angular
Импорт модели в компонент Angular и создание контента на основе данной модели
Источник — Angular 5 - The Complete Guide:
В конспекте →

\app\recipes\recipe-list\recipe-list.component.ts:

//Импорт модели:
import { Recipe } from '../recipe.model'
//Добавление массива объектов:
export class RecipeListComponent implements OnInit {
recipes: Recipe[] = [
new Recipe(
'Test recipe',
'This is a simple test',
'https://cdn.pixabay.com/photo/2017/07/16/10/43/recipe-2508859_960_720.jpg'
)
];
...
}
hosted with ❤ by bxnotes
recipes: Recipe[] - переменная recipes с типом массив объектов класса Recipe.

\app\recipes\recipe-list\recipe-list.component.html:

<div class="row">
<div class="col-xs-12">
<button class="btn btn-success">New Recipe</button>
</div>
<div class="row">
<div class="col-xs-12">
<a href="#" class="list-group-item clearfix">
<div class="pull-left">
<h4 class="list-group-item-heading">Recipe Name</h4>
<p class="list-group-item-text">Description</p>
</div>
<span class="pull-right">
<img src="" alt="" class="img-responsive" style="max-height: 50px;">
</span>
</a>
<app-recipe-item></app-recipe-item>
</div>
</div>
</div>
hosted with ❤ by bxnotes

Источник — Angular 5 - The Complete Guide:
В конспекте →
Опубликовано 23.09.2018

© 2017–2018 bxnotes
конспекты веб разработчика
feedback@bxnotes.ru