Angular2: Possible parameters for @HostBinding and @HostListener decorators

Posted on by
Reply

@HostBinding(?)

  • propertyName: references a property of the host with the propertyName name.
  • attr.attributeName: references an attribute of the host with the attributeName name. The initial value is set to the associated directive property. Setting a value in the property updates the attribute on the corresponding HTML element. Using the null value at this level removes the attribute on the HTML element.
  • style.styleName: links a directive property to a style of the HTML element.
  • class.className: links a directive property to a class name of the HTML element. If the value is true, the class is added otherwise removed.

@HostListener(?)

  • eventName: the name of the event to register a method callback on.

Continue reading →

Шпаргалка по синтаксису шаблонов Angular2

Posted on by
Reply

взято с официальной документации, переведено/переработано.

<input [value]=”firstName”> задание свойства value
<div [attr.role]=”myAriaRole”> задание атрибута role.
<div [class.extra-sparkle]=”isDelightful”> Выставляет класс extra-sparkle по условию isDelightful
<div [style.width.px]=”mySize”> задает значение width в пикселях.
<button (click)=”readRainbow($event)”> Привязывает обраобтчик клика readRainbow
<p>Hello {{ponyName}}</p>
<div title=”Hello {{ponyName}}“>		 Подставляет значение выражения
<my-cmp [(title)]=”name”> Двойное связывание, альтернатива: <my-cmp [title]=”name” (titleChange)=”name=$event”>
<video #movieplayer …>
<button (click)=”movieplayer.play()”>
</video>		 Создает локальную переменную movieplayer, которая является ссылкой на элемент video
<p *myUnless=”myExpression”>…</p> Символ * превращает текущий элмент во втроенный шаблон: :<template [myUnless]=”myExpression”><p>…</p></template>
<p>Card No.: {{cardNumber | myCardNumberFormatter}}</p> Применение myCardNumberFormatter пайпа.
<p>Employer: {{employer?.companyName}}</p> Указание не обязательного поля с помощью оператора “?“

Что можно достать из Angular через console.log

Posted on by
Reply

Мы уже все привыкли к angular.element API предоставляемое AngularJs, благодаря чему мы можем выбрать элемент и дальше исследовать его свойства в консоли обращаясь как :


> angular.element($0)

angular-element

Более подробно тут.

Но что же может нам дать Angular2?

Continue reading →

Как запустить Angular2 ChangeDetection вручную

Posted on by
Reply

Небольшая заметка по мотивам ответа на stackoverflow.

Внедрив следующие сервисы в компонент

ApplicationRef, NgZone, ChangeDetectorRef,

мы можем добиться следующего:

  • ApplicationRef.tick() – то есть запуск changeDetection на корневом элементе, то есть соотвественно запуск на всех элементах дерева(аналог  $rootScope.$digest() )
  • NgZone.run(callback) – тоже самое что и предыдущий вариант, только с выполнением колбэка (аналог $rootScope.$apply(callback) )
  • ChangeDetectorRef.detectChanges() – запуск механизма обнаружения изменений только на текущем элементе ( аналог $scope.$digest() )

Continue reading →

Жизненный цикл Angular2 компонента

Posted on by
Reply

hooks-in-sequence

Angular полностью управляет процессами происходящими в компоненте и над ним: создание, рендеринг, связывание данных и удаление. Мы в свою очередь можем вклиниться в процесс с помощью хуков/триггеров (lifecycle hooks) для каждого из событий.

Какие существуют хуки?

  • ngOnChanges – при изменении входных значений
  • ngOnInit – при инициализации компонента (один раз)
  • ngDoCheck – при вызове механизма обнаружения изменения (change detection)
  • ngAfterContentInit – после вставки компонента в страницу (один раз)
  • ngAfterContentChecked – один раз при инициализациии контента и каждый раз при изменении входящих параметров
  • ngAfterViewInit – аналогичен ngAfterContentInit, только для представления
  • ngAfterViewChecked – аналогичен ngAfterContentChecked, только для представления
  • ngOnDestroy – перед тем, как Angular удалит компонент со страницы

Continue reading →

Switching from WebStrom to VS Code

Posted on by
2

vscode_webstorm_logo

*UPDATED 6.06.2018* 

So what should you do not to lose all the features in Visual Studio Code that you already got used to in WebStorm?

Did I miss something?

Really missing parts or problems:

    • folded blocks copy
    • a lot of bugs with path autocomplete
    • files multi-select (github issue)
    • smart tags not always work when code split into 2 lines
    • no autoformat for selected block
    • multiterminal without tabs
    • quick search/filter for file structure (by typing)
    • TODO parser by the whole project (plugin)
  • SCSS class name completion for the HTML

Something Extra plugins:

Fun: