Initial commit

Author: Nasruddin

.angular-cli.json

@@ -19,7 +19,7 @@
       "testTsconfig": "tsconfig.spec.json",
       "prefix": "app",
       "styles": [
-        "styles.css"
+        "styles.scss"
       ],
       "scripts": [],
       "environmentSource": "environments/environment.ts",
@@ -54,7 +54,7 @@
     }
   },
   "defaults": {
-    "styleExt": "css",
+    "styleExt": "scss",
     "component": {}
   }
 }

package.json

@@ -23,6 +23,7 @@
     "@angular/router": "^5.0.0",
     "core-js": "^2.4.1",
     "rxjs": "^5.5.2",
+    "web-animations-js": "^2.3.1",
     "zone.js": "^0.8.14"
   },
   "devDependencies": {

src/app/animations/ROTATE_TEXT_ANIMATION.ts

@@ -0,0 +1,13 @@
+import { trigger, state, style, transition, animate, keyframes } from '@angular/animations';
+
+export const ROTATE_TEXT_ANIMATION =
+    trigger('rotateText', [
+        state('zero', style({
+            transform: 'rotate(0deg)',
+        })),
+        state('rotated', style({
+            transform: 'rotate(-180deg)',
+        })),
+        transition('zero <=> rotated',
+            animate('500ms ease-in-out')),
+    ]);

src/app/animations/animation.component.html

@@ -0,0 +1 @@
+<p [@rotateText]='state' (click)="rotateMe()">Rotation works!!!</p>

src/app/animations/animation.component.scss

@@ -0,0 +1,8 @@
+p {
+    width:200px;
+    background:lightgray;
+    margin: 100px auto;
+    text-align:center;
+    padding:20px;
+    font-size:1.5em;
+  }

src/app/animations/animation.component.ts

@@ -0,0 +1,24 @@
+import { Component, OnInit } from '@angular/core';
+
+import { ROTATE_TEXT_ANIMATION } from './ROTATE_TEXT_ANIMATION';
+
+
+@Component({
+    selector: 'app-animation',
+    templateUrl: 'animation.component.html',
+    styleUrls: ['animation.component.scss'],
+    animations: [ROTATE_TEXT_ANIMATION]
+})
+
+export class AnimationComponent implements OnInit {
+
+    state: String = 'zero';
+
+    constructor() { }
+
+    ngOnInit() { }
+
+    rotateMe() {
+        this.state = (this.state === 'zero' ? 'rotated' : 'zero');
+    }
+}

src/app/animations/animation.module.ts

@@ -0,0 +1,16 @@
+import { NgModule } from '@angular/core';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { CommonModule } from '@angular/common';
+
+import { AnimationComponent } from './animation.component';
+
+@NgModule({
+    imports: [
+        CommonModule,
+        BrowserAnimationsModule
+    ],
+    exports: [AnimationComponent],
+    declarations: [AnimationComponent],
+    providers: [],
+})
+export class AnimationModule { }

src/app/app.component.html

@@ -1,20 +1,2 @@
 <!--The content below is only a placeholder and can be replaced.-->
-<div style="text-align:center">
-  <h1>
-    Welcome to {{ title }}!
-  </h1>
-  <img width="300" alt="Angular Logo" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">
-</div>
-<h2>Here are some links to help you start: </h2>
-<ul>
-  <li>
-    <h2><a target="_blank" rel="noopener" href="https://angular.io/tutorial">Tour of Heroes</a></h2>
-  </li>
-  <li>
-    <h2><a target="_blank" rel="noopener" href="https://github.com/angular/angular-cli/wiki">CLI Documentation</a></h2>
-  </li>
-  <li>
-    <h2><a target="_blank" rel="noopener" href="https://blog.angular.io/">Angular blog</a></h2>
-  </li>
-</ul>
-
+<app-animation></app-animation>

src/app/app.module.ts

@@ -1,5 +1,6 @@
 import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
+import { AnimationModule } from './animations/animation.module';
 
 
 import { AppComponent } from './app.component';
@@ -10,7 +11,8 @@ import { AppComponent } from './app.component';
     AppComponent
   ],
   imports: [
-    BrowserModule
+    BrowserModule,
+    AnimationModule
   ],
   providers: [],
   bootstrap: [AppComponent]

src/polyfills.ts

@@ -50,7 +50,7 @@ import 'core-js/es7/reflect';
  * Required to support Web Animations `@angular/platform-browser/animations`.
  * Needed for: All but Chrome, Firefox and Opera. http://caniuse.com/#feat=web-animation
  **/
-// import 'web-animations-js';  // Run `npm install --save web-animations-js`.
+import 'web-animations-js';  // Run `npm install --save web-animations-js`.