chore(*): adding public folder Thu Feb 15 12:28:00 CET 2024

thoughtram · Feb 15, 2024 · 61b8022 · 61b8022
commit 61b8022
Show file tree

Hide file tree

Showing 1,330 changed files with 37,850 additions and 0 deletions.
diff --git a/07425d9b23c4ccbc64b20209dc7a7169/git-branching-commits-abstract-2.svg b/07425d9b23c4ccbc64b20209dc7a7169/git-branching-commits-abstract-2.svg
diff --git a/1502fcd5826f063bb070681a078c4fbb/git-branching-head-pointer.svg b/1502fcd5826f063bb070681a078c4fbb/git-branching-head-pointer.svg
diff --git a/1d466be0730556c40940e413ecf7b04f/snake_preview.gif b/1d466be0730556c40940e413ecf7b04f/snake_preview.gif
diff --git a/2015-06-06-ng-messages-revisited/index.html b/2015-06-06-ng-messages-revisited/index.html
diff --git a/216c77e6de0df4be406a1548b5410462/git-branching-head-pointer-4.svg b/216c77e6de0df4be406a1548b5410462/git-branching-head-pointer-4.svg
diff --git a/21790b11d643613a43a1039157bae9a3/git-detached-head-4.svg b/21790b11d643613a43a1039157bae9a3/git-detached-head-4.svg
diff --git a/2dd8e9b119adc196261798a139c683ab/injector-tree-2.svg b/2dd8e9b119adc196261798a139c683ab/injector-tree-2.svg
diff --git a/404.html b/404.html
diff --git a/404/index.html b/404/index.html
diff --git a/44820d092a70af998a5c33b718f3969d/cd-tree-7.svg b/44820d092a70af998a5c33b718f3969d/cd-tree-7.svg
diff --git a/477bd3a6ea642886f1669072185d43e3/transient-dependencies-4.svg b/477bd3a6ea642886f1669072185d43e3/transient-dependencies-4.svg
diff --git a/4b191284084e63c8b9e265569a426245/git-branching-head-pointer-3.svg b/4b191284084e63c8b9e265569a426245/git-branching-head-pointer-3.svg
diff --git a/6f49d0871e4dd635846506901215239e/upgrade-2-phases-3.svg b/6f49d0871e4dd635846506901215239e/upgrade-2-phases-3.svg
diff --git a/70c21bbe865416334d97588bb4da9a5a/git-branching-new-branch.svg b/70c21bbe865416334d97588bb4da9a5a/git-branching-new-branch.svg
diff --git a/7ac7580fb5b9791eca7c265ce8f60ab6/git-detached-head-2.svg b/7ac7580fb5b9791eca7c265ce8f60ab6/git-detached-head-2.svg
diff --git a/7cd38f19f51a597d970346585e57a9c6/injector-tree-3.svg b/7cd38f19f51a597d970346585e57a9c6/injector-tree-3.svg
diff --git a/8393e4d5673c51a3779a96651966d72d/cd-tree-10.svg b/8393e4d5673c51a3779a96651966d72d/cd-tree-10.svg
diff --git a/8b38e48e2375ae32088cc955d25ef223/overlay_preview.gif b/8b38e48e2375ae32088cc955d25ef223/overlay_preview.gif
diff --git a/98f70955c11277801562c3e63b068968/git-branching-head-pointer-2.svg b/98f70955c11277801562c3e63b068968/git-branching-head-pointer-2.svg
diff --git a/9a806b145b1b87ee22950bb562df02af/catch_5_state_flow.gif b/9a806b145b1b87ee22950bb562df02af/catch_5_state_flow.gif
diff --git a/9e1929ff8a274bad3ef09aebd3610f07/animation_preview.gif b/9e1929ff8a274bad3ef09aebd3610f07/animation_preview.gif
diff --git a/9f0fd18e6f0ea759062f1317f6f9d73f/git-detached-head-3.svg b/9f0fd18e6f0ea759062f1317f6f9d73f/git-detached-head-3.svg
diff --git a/CNAME b/CNAME
@@ -0,0 +1 @@
+blog.thoughtram.io
diff --git a/a77dcff322d4e61495ce23c050433bf8/i18n-process.svg b/a77dcff322d4e61495ce23c050433bf8/i18n-process.svg
diff --git a/all/index.html b/all/index.html
diff --git a/angular/2015/03/21/angular-and-i18n-the-new-world.html b/angular/2015/03/21/angular-and-i18n-the-new-world.html
diff --git a/angular/2015/03/27/building-a-zippy-component-in-angular-2.html b/angular/2015/03/27/building-a-zippy-component-in-angular-2.html
diff --git a/angular/2015/04/09/developing-a-tabs-component-in-angular-2.html b/angular/2015/04/09/developing-a-tabs-component-in-angular-2.html
diff --git a/angular/2015/05/03/the-difference-between-annotations-and-decorators.html b/angular/2015/05/03/the-difference-between-annotations-and-decorators.html
diff --git a/angular/2015/05/09/writing-angular-2-code-in-es5.html b/angular/2015/05/09/writing-angular-2-code-in-es5.html
diff --git a/angular/2015/05/18/dependency-injection-in-angular-2.html b/angular/2015/05/18/dependency-injection-in-angular-2.html
diff --git a/angular/2015/06/16/routing-in-angular-2.html b/angular/2015/06/16/routing-in-angular-2.html
diff --git a/angular/2015/06/25/styling-angular-2-components.html b/angular/2015/06/25/styling-angular-2-components.html
diff --git a/angular/2015/06/25/taking-angular-master-class-to-the-next-level.html b/angular/2015/06/25/taking-angular-master-class-to-the-next-level.html
diff --git a/angular/2015/06/29/shadow-dom-strategies-in-angular2.html b/angular/2015/06/29/shadow-dom-strategies-in-angular2.html
diff --git a/angular/2015/07/06/even-better-es5-code-for-angular-2.html b/angular/2015/07/06/even-better-es5-code-for-angular-2.html
diff --git a/angular/2015/07/07/service-vs-factory-once-and-for-all.html b/angular/2015/07/07/service-vs-factory-once-and-for-all.html
diff --git a/angular/2015/08/11/angular-2-template-syntax-demystified-part-1.html b/angular/2015/08/11/angular-2-template-syntax-demystified-part-1.html
diff --git a/angular/2015/08/20/host-and-visibility-in-angular-2-dependency-injection.html b/angular/2015/08/20/host-and-visibility-in-angular-2-dependency-injection.html
diff --git a/angular/2015/09/03/forward-references-in-angular-2.html b/angular/2015/09/03/forward-references-in-angular-2.html
diff --git a/angular/2015/09/17/resolve-service-dependencies-in-angular-2.html b/angular/2015/09/17/resolve-service-dependencies-in-angular-2.html
diff --git a/angular/2015/10/24/upgrading-apps-to-angular-2-using-ngupgrade.html b/angular/2015/10/24/upgrading-apps-to-angular-2-using-ngupgrade.html
diff --git a/angular/2015/11/16/multiple-transclusion-and-named-slots.html b/angular/2015/11/16/multiple-transclusion-and-named-slots.html
diff --git a/angular/2015/12/10/ng-message-format-the-unheard-feature-in-angular.html b/angular/2015/12/10/ng-message-format-the-unheard-feature-in-angular.html
diff --git a/angular/2016/01/06/taking-advantage-of-observables-in-angular2.html b/angular/2016/01/06/taking-advantage-of-observables-in-angular2.html
diff --git a/angular/2016/01/07/taking-advantage-of-observables-in-angular2-pt2.html b/angular/2016/01/07/taking-advantage-of-observables-in-angular2-pt2.html
diff --git a/angular/2016/01/22/understanding-zones.html b/angular/2016/01/22/understanding-zones.html
diff --git a/angular/2016/02/01/zones-in-angular-2.html b/angular/2016/02/01/zones-in-angular-2.html
diff --git a/angular/2016/02/22/angular-2-change-detection-explained.html b/angular/2016/02/22/angular-2-change-detection-explained.html
diff --git a/angular/2016/03/14/custom-validators-in-angular-2.html b/angular/2016/03/14/custom-validators-in-angular-2.html
diff --git a/angular/2016/03/21/template-driven-forms-in-angular-2.html b/angular/2016/03/21/template-driven-forms-in-angular-2.html
diff --git a/angular/2016/05/13/angular-2-providers-using-map-literals.html b/angular/2016/05/13/angular-2-providers-using-map-literals.html
diff --git a/angular/2016/05/16/exploring-rx-operators-map.html b/angular/2016/05/16/exploring-rx-operators-map.html
diff --git a/angular/2016/05/23/opaque-tokens-in-angular-2.html b/angular/2016/05/23/opaque-tokens-in-angular-2.html
diff --git a/angular/2016/06/08/component-relative-paths-in-angular-2.html b/angular/2016/06/08/component-relative-paths-in-angular-2.html
diff --git a/angular/2016/06/14/routing-in-angular-2-revisited.html b/angular/2016/06/14/routing-in-angular-2-revisited.html
diff --git a/angular/2016/06/16/cold-vs-hot-observables.html b/angular/2016/06/16/cold-vs-hot-observables.html
diff --git a/angular/2016/06/22/model-driven-forms-in-angular-2.html b/angular/2016/06/22/model-driven-forms-in-angular-2.html
diff --git a/angular/2016/07/18/guards-in-angular-2.html b/angular/2016/07/18/guards-in-angular-2.html
diff --git a/angular/2016/07/27/custom-form-controls-in-angular-2.html b/angular/2016/07/27/custom-form-controls-in-angular-2.html
diff --git a/angular/2016/09/14/bypassing-providers-in-angular-2.html b/angular/2016/09/14/bypassing-providers-in-angular-2.html
diff --git a/angular/2016/09/15/angular-2-final-is-out.html b/angular/2016/09/15/angular-2-final-is-out.html
diff --git a/angular/2016/09/16/angular-2-animation-important-concepts.html b/angular/2016/09/16/angular-2-animation-important-concepts.html
diff --git a/angular/2016/10/10/resolving-route-data-in-angular-2.html b/angular/2016/10/10/resolving-route-data-in-angular-2.html
diff --git a/angular/2016/10/13/two-way-data-binding-in-angular-2.html b/angular/2016/10/13/two-way-data-binding-in-angular-2.html
diff --git a/angular/2016/11/28/testing-services-with-http-in-angular-2.html b/angular/2016/11/28/testing-services-with-http-in-angular-2.html
diff --git a/angular/2016/12/27/angular-2-advance-testing-with-custom-matchers.html b/angular/2016/12/27/angular-2-advance-testing-with-custom-matchers.html
diff --git a/angular/2017/01/09/a-revamped-angular-master-class.html b/angular/2017/01/09/a-revamped-angular-master-class.html
diff --git a/angular/2017/02/02/making-your-angular-app-fast.html b/angular/2017/02/02/making-your-angular-app-fast.html
diff --git a/angular/2017/02/21/using-zones-in-angular-for-better-performance.html b/angular/2017/02/21/using-zones-in-angular-for-better-performance.html
diff --git a/angular/2017/02/27/three-things-you-didnt-know-about-the-async-pipe.html b/angular/2017/02/27/three-things-you-didnt-know-about-the-async-pipe.html
diff --git a/angular/2017/05/08/angular-master-class-redux-and-ngrx.html b/angular/2017/05/08/angular-master-class-redux-and-ngrx.html
diff --git a/angular/2017/05/23/custom-themes-with-angular-material.html b/angular/2017/05/23/custom-themes-with-angular-material.html
diff --git a/angular/2017/07/26/a-web-animations-deep-dive-with-angular.html b/angular/2017/07/26/a-web-animations-deep-dive-with-angular.html
diff --git a/angular/2017/11/13/easy-dialogs-with-angular-material.html b/angular/2017/11/13/easy-dialogs-with-angular-material.html
diff --git a/angular/2017/11/20/custom-overlays-with-angulars-cdk.html b/angular/2017/11/20/custom-overlays-with-angulars-cdk.html
diff --git a/angular/2017/11/27/custom-overlays-with-angulars-cdk-part-two.html b/angular/2017/11/27/custom-overlays-with-angulars-cdk-part-two.html
diff --git a/angular/2018/03/05/advanced-caching-with-rxjs.html b/angular/2018/03/05/advanced-caching-with-rxjs.html
diff --git a/angular/2019/03/11/using-dynamic-angular-components-inside-your-custom-widgets.html b/angular/2019/03/11/using-dynamic-angular-components-inside-your-custom-widgets.html
diff --git a/angular2/2015/11/23/multi-providers-in-angular-2.html b/angular2/2015/11/23/multi-providers-in-angular-2.html
diff --git a/angularjs/2014/10/14/exploring-angular-1.3-one-time-bindings.html b/angularjs/2014/10/14/exploring-angular-1.3-one-time-bindings.html
diff --git a/angularjs/2014/10/19/exploring-angular-1.3-ng-model-options.html b/angularjs/2014/10/19/exploring-angular-1.3-ng-model-options.html
diff --git a/angularjs/2014/11/06/exploring-angular-1.3-angular-hint.html b/angularjs/2014/11/06/exploring-angular-1.3-angular-hint.html
diff --git a/angularjs/2014/11/19/exploring-angular-1.3-stateful-filters.html b/angularjs/2014/11/19/exploring-angular-1.3-stateful-filters.html
diff --git a/angularjs/2014/12/18/exploring-angular-1.3-es6-style-promises.html b/angularjs/2014/12/18/exploring-angular-1.3-es6-style-promises.html
diff --git a/angularjs/2014/12/22/exploring-angular-1.3-disabling-debug-info.html b/angularjs/2014/12/22/exploring-angular-1.3-disabling-debug-info.html
diff --git a/angularjs/2015/01/02/exploring-angular-1.3-bindToController.html b/angularjs/2015/01/02/exploring-angular-1.3-bindToController.html
diff --git a/angularjs/2015/01/11/exploring-angular-1.3-validators-pipeline.html b/angularjs/2015/01/11/exploring-angular-1.3-validators-pipeline.html
diff --git a/angularjs/2015/01/14/exploring-angular-1.3-speed-up-with-applyAsync.html b/angularjs/2015/01/14/exploring-angular-1.3-speed-up-with-applyAsync.html
diff --git a/angularjs/2015/01/23/exploring-angular-1.3-ngMessages.html b/angularjs/2015/01/23/exploring-angular-1.3-ngMessages.html
diff --git a/angularjs/2015/02/19/futuristic-routing-in-angular.html b/angularjs/2015/02/19/futuristic-routing-in-angular.html
diff --git a/angularjs/2015/02/21/around-the-globe.html b/angularjs/2015/02/21/around-the-globe.html
diff --git a/angularjs/2015/03/08/joining-betahaus-education.html b/angularjs/2015/03/08/joining-betahaus-education.html
diff --git a/angularjs/2016/03/29/exploring-angular-1.5-lifecycle-hooks.html b/angularjs/2016/03/29/exploring-angular-1.5-lifecycle-hooks.html
diff --git a/angularjs/es6/2015/01/23/exploring-angular-1.3-using-es6.html b/angularjs/es6/2015/01/23/exploring-angular-1.3-using-es6.html
diff --git a/annoucements/2015/06/17/anouncing-hanovers-second-rust-meetup.html b/annoucements/2015/06/17/anouncing-hanovers-second-rust-meetup.html
diff --git a/announcements/2014/06/06/we-are-thoughtram.html b/announcements/2014/06/06/we-are-thoughtram.html
diff --git a/announcements/2014/06/23/announcing-our-first-workshop.html b/announcements/2014/06/23/announcing-our-first-workshop.html
diff --git a/announcements/2014/07/04/tickets-are-on-sale-now.html b/announcements/2014/07/04/tickets-are-on-sale-now.html
diff --git a/announcements/2014/07/05/git-ninya-class-comes-to-istanbul.html b/announcements/2014/07/05/git-ninya-class-comes-to-istanbul.html
diff --git a/announcements/2014/11/02/git-ninja-class-in-amsterdam.html b/announcements/2014/11/02/git-ninja-class-in-amsterdam.html
diff --git a/announcements/2015/04/19/upcoming-events-in-2015.html b/announcements/2015/04/19/upcoming-events-in-2015.html
diff --git a/announcements/2015/05/08/speaking-at-code-talks.html b/announcements/2015/05/08/speaking-at-code-talks.html
diff --git a/announcements/2015/05/11/sponsoring-angularconnect.html b/announcements/2015/05/11/sponsoring-angularconnect.html
diff --git a/announcements/2015/08/31/going-full-time.html b/announcements/2015/08/31/going-full-time.html
diff --git a/announcements/2015/09/14/angular-training-day-bangkok.html b/announcements/2015/09/14/angular-training-day-bangkok.html
diff --git a/announcements/2015/10/08/pascal-becomes-a-gde.html b/announcements/2015/10/08/pascal-becomes-a-gde.html
diff --git a/announcements/2015/10/26/angular-master-class-extended-ngupgrade.html b/announcements/2015/10/26/angular-master-class-extended-ngupgrade.html
diff --git a/announcements/2015/11/19/how-we-run-trainings.html b/announcements/2015/11/19/how-we-run-trainings.html
diff --git a/announcements/2015/12/21/introducing-angular-2-master-class.html b/announcements/2015/12/21/introducing-angular-2-master-class.html
diff --git a/announcements/2015/12/31/angular2-master-class-at-ng-nl.html b/announcements/2015/12/31/angular2-master-class-at-ng-nl.html
diff --git a/announcements/2016/02/10/sponsoring-angularconnect-again.html b/announcements/2016/02/10/sponsoring-angularconnect-again.html
diff --git a/announcements/2016/04/15/updates-and-announcements.html b/announcements/2016/04/15/updates-and-announcements.html
diff --git a/announcements/2016/05/19/thomas-joins-thoughtram.html b/announcements/2016/05/19/thomas-joins-thoughtram.html
diff --git a/announcements/2016/06/23/updates-and-announcements.html b/announcements/2016/06/23/updates-and-announcements.html
diff --git a/announcements/2016/08/30/announcing-angular-2-master-class-in-nyc.html b/announcements/2016/08/30/announcing-angular-2-master-class-in-nyc.html
diff --git a/announcements/2016/10/30/announcing-angular-2-master-class-in-sydney.html b/announcements/2016/10/30/announcing-angular-2-master-class-in-sydney.html
diff --git a/announcements/2017/02/01/announcing-angular-master-class-in-freiburg.html b/announcements/2017/02/01/announcing-angular-master-class-in-freiburg.html
diff --git a/announcements/2017/02/09/dominic-joins-thoughtram.html b/announcements/2017/02/09/dominic-joins-thoughtram.html
diff --git a/announcements/2017/05/05/announcing-angular-master-class-in-denmark.html b/announcements/2017/05/05/announcing-angular-master-class-in-denmark.html
diff --git a/announcements/2017/05/30/angular-master-class-community-meetup.html b/announcements/2017/05/30/angular-master-class-community-meetup.html
diff --git a/announcements/2017/06/23/announcing-angular-master-class-in-berlin.html b/announcements/2017/06/23/announcing-angular-master-class-in-berlin.html
diff --git a/announcements/2017/06/23/announcing-angular-master-class-in-houston.html b/announcements/2017/06/23/announcing-angular-master-class-in-houston.html
diff --git a/announcements/2018/02/07/announcing-angular-master-class-at-shopware.html b/announcements/2018/02/07/announcing-angular-master-class-at-shopware.html
diff --git a/announcements/2018/04/12/rxjs-master-class-and-courseware-updates.html b/announcements/2018/04/12/rxjs-master-class-and-courseware-updates.html
diff --git a/announcements/2019/07/28/angular-master-class-coming-to-malaga.html b/announcements/2019/07/28/angular-master-class-coming-to-malaga.html
diff --git a/announcements/2019/09/02/more-GDE-power-at-thoughtram.html b/announcements/2019/09/02/more-GDE-power-at-thoughtram.html
diff --git a/announcements/2024/02/13/farewell.html b/announcements/2024/02/13/farewell.html
diff --git a/announcements/machine-learning/2017/12/20/machine-learning-jump-start-online-course.html b/announcements/machine-learning/2017/12/20/machine-learning-jump-start-online-course.html
diff --git a/announcements/meetups/2014/06/24/organizing-hannovers-first-rust-meetup.html b/announcements/meetups/2014/06/24/organizing-hannovers-first-rust-meetup.html
diff --git a/...ols/2014/09/18/announcing-clog-a-conventional-changelog-generator-for-the-rest-of-us.html b/...ols/2014/09/18/announcing-clog-a-conventional-changelog-generator-for-the-rest-of-us.html
diff --git a/app-db11fdec89ef44788bcc.js b/app-db11fdec89ef44788bcc.js
diff --git a/app-db11fdec89ef44788bcc.js.map b/app-db11fdec89ef44788bcc.js.map
diff --git a/...849d2bde959f3e59d7d35781b7/2016-09-16-angular-2-animation-important-concepts.md b/...849d2bde959f3e59d7d35781b7/2016-09-16-angular-2-animation-important-concepts.md
@@ -0,0 +1,339 @@
+---
+layout: post
+title: Angular Animations - Foundation Concepts
+date: 2016-09-16T00:00:00.000Z
+update_date: 2017-04-01T00:00:00.000Z
+imageUrl: ../assets/images/banner/angular-2-component-animations.jpg
+summary: >-
+  Animation in Angular is now easy and more intuitive... Learn foundational
+  animation concepts and start animating your Angular components!
+categories:
+  - angular
+tags:
+  - angular2
+  - animation
+  - components
+  - relative paths
+topic: components
+author: thomas_burleson
+related_posts:
+  - Component-Relative Paths in Angular
+  - RxJS Master Class and courseware updates
+  - Advanced caching with RxJS
+  - Custom Overlays with Angular's CDK - Part 2
+  - Custom Overlays with Angular's CDK
+  - Easy Dialogs with Angular Material
+related_videos:
+  - '175255006'
+  - '193524896'
+  - '189792758'
+  - '189785428'
+  - '175218351'
+  - '189618526'
+
+---
+
+Animations features often are scary goals for developers. And Angular's doctrine
+
+> "... controllers should not directly modify DOM elements!"
+
+made Animation features intimidating as hell. But **Angular animations are not scary!** Templates are closely associated/integrated with `@Component`. We will notice that animations following a similar pattern.
+
+Let's build a component that hides and shows its contents, uses fade animation effects, and allows external components to easily trigger those fade effects.
+
+### Our Scenario
+
+Here is a simple Angular component with hide and show features. This sample, however, does not have animations (yet):
+
+```js
+@Component({
+  selector: 'my-fader',
+    template: `
+    <div *ngIf="visibility == 'shown'" >
+      <ng-content></ng-content>
+      Can you see me? 
+    </div>
+  `
+})
+export class MyComponent implements OnChanges {
+  visibility = 'shown';
+
+  @Input() isVisible : boolean = true;
+
+  ngOnChanges() {
+   this.visibility = this.isVisible ? 'shown' : 'hidden';
+  }
+}
+```
+
+This component simply publishes an `@Input() isVisible` property; which allows other external components to show/hide the text content... without any animations.
+
+### Enable Animations Module
+
+Since Angular 4.x, there's a new module `BrowserAnimationsModule` that introduces all animation capabilities. That's why we first have add that to our application module's `imports` like this:
+
+```js
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+
+@NgModule({
+  imports: [
+    ...
+    BrowserAnimationsModule
+  ]
+  ...
+})
+export class AppModule {}
+```
+
+Once that is done, we can use any kind of animation API in our application. If we want to use animation function like `trigger()` or `state()`, we need to import them also from `'@angular/platform-browser/animations'` instead of `'@angular/core'`.
+
+### Configure Component Animations
+
+We want the `my-fader` component to **fade-in** or **fade-out** its text content. And we want to *animate* those fades effects.
+
+To start animating, let's first add animation metadata to our component.
+
+```js
+@Component({
+  ...,
+  template : ``,
+  animations: [
+    ...
+  ]
+)]
+class MyComponent() { ... }
+```
+
+Above we show that the `animations` metadata property is defined in the `@Component` decorator. Just like `template` metadata property!
+
+Since our component has a `visibility` property whose state can change between `shown` and `hidden`, let’s configure animations to trigger and animate during each value change.
+
+```js
+animations: [
+  trigger('visibilityChanged', [
+  state('shown' , style({ opacity: 1 })), 
+  state('hidden', style({ opacity: 0 }))
+  ])
+]
+```
+
+Before we add more metadata, let's talk about the syntax above. What does it mean... and why is this syntax used?
+
+The techno-speak above is saying that when the `visibilityChanged` property changes and the value `== shown`, then the target element opacity changes to 1. And when the value changes to `== hidden`, the target element opacity should change to 0.
+
+> Note: The `[@visibilityChanged]` binding is on `<div>` child content element in the `<my-fader>` component. It is NOT on the `<my-fader>` element itself. In other words, the animation target in our example is actually the `<div>` element; not the component **host** element.
+
+Now, you might also wonder where `visibilityChanged` comes from? Because our component property is just called `visibility`. Hold your wild horses Mr. StageCoach, we'll clarify that soon!" Let's first talk about animation durations.
+
+We want to animate these changes over a time duration instead of instantly hiding/showing the content. We need to configure a *transition* to specify animation durations. With Angular this is also suprisingly easy:
+
+```js
+animations: [
+  trigger(’visibilityChanged', [
+    state('shown' , style({ opacity: 1 })), 
+    state('hidden', style({ opacity: 0 })),
+    transition('* => *', animate('.5s'))
+  ])
+]
+```
+
+With the above `transition`, we added information to the animation configuration so each trigger value change will have a 500 msec transition. 
+
+So a **fade-in** (opacity 0 -> 1, with a duration of 500 msec) will occur when the value changes from `hidden` to `shown`. And likewise the **fade-out** (opacity 1 -> 0, with a duration of 500 msec) will occur when the value changes from `shown` to `hidden`. By the way, you could also have used `animate('500ms')` to indicate the millsecond duration explicitly.
+
+And what does the `transition('* => *', ...)` mean? Think of `* => *` as a transition from one state to another state; where `*` is a wildcard to mean **any** state value. If we wanted the *fade-out* to be slower than the *fade-in*, here is how we would configure the animation metadata:
+
+```js
+animations: [
+  trigger(’visibilityChanged', [
+    state('shown' , style({ opacity: 1 })),
+    state('hidden', style({ opacity: 0 })),
+    transition('shown => hidden', animate('600ms')),
+    transition('hidden => shown', animate('300ms')),
+  ])
+]
+```
+
+See how easy this is? This notation is so easy to understand.
+
+
+### The Essential Concept
+
+The essential take-away Animation concept is that **Angular Animations** are triggered on component <u>state changes</u>. And developers should consider <u>state changes</u> to be equivalent to <u>value changes in a property</u> of the component instance.
+
+![super-cool](https://media.giphy.com/media/NUC0kwRfsL0uk/giphy.gif)
+
+
+### Linking Animation to the Component
+
+
+<br/>
+While we configured the Animation metadata,  I am sure you are wondering:
+
+  *  How is the animation property `visibilityChanged` actually connected to the component?
+  *  How are the animations linked to the component’s properties?
+
+Since data-binding features are already supported between the **component** and its **template**,  Angular uses a <u>special</u> template animation syntax to support triggering the animation after data-binding changes. So in the component template, we can do this:
+
+```html
+<div [@visibilityChanged]="visibility">
+  Can you see me? I should fade in or out...
+</div>
+```
+
+
+Above the `@visibilityChanged` is the special template animation property and it uses databinding  `[@visibilityChanged]=“visibility”` to bind the component's visibility property to the animation  trigger property `visibilityChanged`.
+
+Here is the entire component definition updated with Animation features:
+
+```js
+import { Component, OnChanges, Input } from '@angular/core';
+import { trigger, state, animate, transition, style } from '@angular/platform-browser/animations';
+
+@Component({
+  selector : 'my-fader',
+  animations: [
+  trigger('visibilityChanged', [
+    state('shown' , style({ opacity: 1 })),
+    state('hidden', style({ opacity: 0 })),
+    transition('* => *', animate('.5s'))
+  ])
+  ],
+  template: `
+  <div [@visibilityChanged]="visibility" >
+    <ng-content></ng-content>  
+    <p>Can you see me? I should fade in or out...</p>
+  </div>
+  `
+})
+export class FaderComponent implements OnChanges {
+  @Input() isVisible : boolean = true;
+  visibility = 'shown';
+
+  ngOnChanges() {
+   this.visibility = this.isVisible ? 'shown' : 'hidden';
+  }
+}
+```
+
+
+### Reducing Complexity
+
+What if - instead of the using the extra `visibility` property - you just wanted to use the `isVisible` property directly? This would obviate `ngOnChanges()` and reduce the code complexity to:
+
+ ```js
+ @Component({
+   animations: [
+     trigger('visibilityChanged', [
+       state('shown' , style({ opacity: 1 })),
+       state('hidden', style({ opacity: 0 })),
+       transition('* => *', animate('.5s'))
+     ])
+   ],
+   template: `
+   <div [@visibilityChanged]="isVisible" >
+        ...
+   </div>
+   `
+ })
+ export class FaderComponent {
+   @Input() isVisible : boolean = true;
+ }
+```
+
+I love the tersity of this code. But this will not work without another **important** change to the animation metadata!
+
+> Remember that the `@visibilityChanged` animation trigger property has defined states for the values: `shown` or `hidden`.
+
+If you use the `myFader::isVisible` boolean property, then your animation state values must be changed to `true` and `false` since those are the possible values of the `isVisible` property.
+
+
+```js
+import { Component, OnChanges, Input } from '@angular/core';
+import { trigger, state, animate, transition, style } form '@angular/platform-browser/animations';
+
+@Component({
+  selector : 'my-fader',
+  animations: [
+    trigger('visibilityChanged', [
+      state('true' , style({ opacity: 1, transform: 'scale(1.0)' })),
+      state('false', style({ opacity: 0, transform: 'scale(0.0)'  })),
+      transition('1 => 0', animate('300ms')),
+      transition('0 => 1', animate('900ms'))
+    ])
+  ],
+  template: `
+  <div [@visibilityChanged]="isVisible" >
+    <ng-content></ng-content>
+    <p>Can you see me? I should fade in or out...</p>
+  </div>
+  `
+})
+export class FaderComponent implements OnChanges {
+  @Input() isVisible : boolean = true;
+}
+```
+
+> Extra Bonus: The demo has some extra features. The *host* `my-fader` element now has a purple background; when you hide the `my-fader` content children you will see the host background. This change was added so you can visually see the differences between the *host* and the *target* animation elements.
+
+### Our Animation Workflow
+
+Above we have an improved the component definition; enhanced with animation features. Here is a workflow of the [animation] process:
+
+  1.  the input value for `isVisible` changes,
+  2.  the template databinding updates the `@visibilityChanged` property,
+  3.  the animation trigger is invoked,
+  4.  the `@visibilityChanged` value is used to identify the **state** animations and transitions, and
+  5.  the target element opacity (and other properties) change-animates for xxx msecs
+
+
+### Animation Philosophy
+
+One of the design goals for Angular Animations is to make it **easy** for developers to configure and use animations. The API and syntax is designed to be:
+
+  *  intuitive
+  *  declarative and
+  *  immediately associated with the component using metadata
+
+The best part of Angular Animation design is that the **component->template->animation** binding solution <u>decouples</u> the animation from the component internals and uses the template as the binding bridge.
+
+The developer decides which component properties should bind to which animation triggers, then simply uses the possible component property values to set the animation *state* values accordingly.
+
+> In most cases, you will never need to write JavaScript animation logic.
+
+All the mechanics of preparing and managing the animations are hidden from the developer. This 'separation of concerns' provides HUGE benefits to allow developers to easily use Angular Animations with custom architectures & custom implementations.
+
+### Animations with Components Hierarchies
+
+Components should never be concerned with the details regarding animation of child components. Parent components can monitor and alter the public **state** of child components, but should never attempt to modify the internals of those components.
+
+In our examples (above), parent components can simply change the state of the child `my-fader` instances and then magically the contents of the `my-fader` instance will fadeIn or fadeOut.
+
+```js
+@Component({
+  selector : 'my-app',
+  template: `
+
+  <my-fader [isVisible]="showFader">
+    Am I visible ?
+  </my-fader>
+
+  <button (click)="showFader = !showFader"> Toggle </button>
+  `
+})
+export class MyAppComponent {  
+  showFader : boolean = true;
+}
+```
+
+### Summary
+
+The Angular Animation engine and compiler does all the hard work preparing, managing, and running the animations. Developers use the `@Component` metadata to declaratively define the component styles, templates, and [now] animations. And it is the component **template** that serves as the *bridge* to link the component instance state to the animation trigger property.
+
+### Thanks
+
+Kudos to [Matias Niemelä](https://twitter.com/yearofmoo) for the amazing Animation engine in Angular!
+
+![matiasvikinghair](https://cloud.githubusercontent.com/assets/210413/18608523/49b8707c-7cb1-11e6-8d2c-ab43db07ca78.jpg)
+
+These core animation features [discussed above] are available in the Angular 2.0.0 release. And never fear, Matias and his team are working hard on more amazing, intuitive Animation features. So stay tuned for even MORE cool features and blogs coming soon!
diff --git a/b85647d61ad1b8e9ac1b77890f04b18a/injector-tree-4.svg b/b85647d61ad1b8e9ac1b77890f04b18a/injector-tree-4.svg
diff --git a/bac05e8fc17328a1f27f61b62254db8c/cd-tree-8.svg b/bac05e8fc17328a1f27f61b62254db8c/cd-tree-8.svg
diff --git a/bca1a6fa015ccd5fca4e829987f67fa7/injector-tree.svg b/bca1a6fa015ccd5fca4e829987f67fa7/injector-tree.svg
diff --git a/c0cf1789bd907b79e2b567861935a74d/a1-a2-2.svg b/c0cf1789bd907b79e2b567861935a74d/a1-a2-2.svg
diff --git a/c37be685abb1c4f92303f76fcb3eca17/git-branching-head-pointer-5.svg b/c37be685abb1c4f92303f76fcb3eca17/git-branching-head-pointer-5.svg
diff --git a/c508c47a09fb305f757a37f706488aed/button_state_machine.gif b/c508c47a09fb305f757a37f706488aed/button_state_machine.gif
diff --git a/categories/angular-2/index.html b/categories/angular-2/index.html
diff --git a/categories/angular/index.html b/categories/angular/index.html
diff --git a/categories/angularjs/index.html b/categories/angularjs/index.html
diff --git a/categories/annoucements/index.html b/categories/annoucements/index.html
diff --git a/categories/announcements/index.html b/categories/announcements/index.html
diff --git a/categories/company/index.html b/categories/company/index.html
diff --git a/categories/es-6/index.html b/categories/es-6/index.html
diff --git a/categories/git/index.html b/categories/git/index.html
diff --git a/categories/machine-learning/index.html b/categories/machine-learning/index.html
diff --git a/categories/meetups/index.html b/categories/meetups/index.html
diff --git a/categories/rebase-book/index.html b/categories/rebase-book/index.html
diff --git a/categories/rust/index.html b/categories/rust/index.html
diff --git a/categories/rx/index.html b/categories/rx/index.html
diff --git a/categories/rxjs/index.html b/categories/rxjs/index.html
diff --git a/categories/tools/index.html b/categories/tools/index.html
diff --git a/cec743a8e1904a4f0268047a87341368/cd-4.svg b/cec743a8e1904a4f0268047a87341368/cd-4.svg
diff --git a/chunk-map.json b/chunk-map.json
@@ -0,0 +1 @@
+{"app":["/app-db11fdec89ef44788bcc.js"],"component---src-templates-blog-post-js":["/component---src-templates-blog-post-js-6a14d6c49d22aa388ff9.js"],"component---src-templates-category-js":["/component---src-templates-category-js-4376524bed80ab31f5c7.js"],"component---src-pages-404-js":["/component---src-pages-404-js-6a74e57e5569370f5224.js"],"component---src-pages-all-js":["/component---src-pages-all-js-7aa251af6b402c5bb6a7.js"],"component---src-pages-confirmation-thank-you-js":["/component---src-pages-confirmation-thank-you-js-e20b16d362e2acd832ef.js"],"component---src-pages-finish-newsletter-subscription-js":["/component---src-pages-finish-newsletter-subscription-js-9bc9dd352c7e25398f2b.js"],"component---src-pages-index-js":["/component---src-pages-index-js-34313bc70d6e2470e416.js"]}
diff --git a/commons-9a6c7e4a80f98fe6d0b9.js b/commons-9a6c7e4a80f98fe6d0b9.js
diff --git a/commons-9a6c7e4a80f98fe6d0b9.js.map b/commons-9a6c7e4a80f98fe6d0b9.js.map
diff --git a/commons.743a077edf8bbf03e9ea.css b/commons.743a077edf8bbf03e9ea.css
diff --git a/company/2017/08/17/company-offsite-2017.html b/company/2017/08/17/company-offsite-2017.html
diff --git a/component---src-pages-404-js-6a74e57e5569370f5224.js b/component---src-pages-404-js-6a74e57e5569370f5224.js
diff --git a/component---src-pages-404-js-6a74e57e5569370f5224.js.map b/component---src-pages-404-js-6a74e57e5569370f5224.js.map