Init.

package.json

@@ -12,16 +12,18 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^4.0.0",
+    "@angular/animations": "^4.2.4",
     "@angular/common": "^4.0.0",
     "@angular/compiler": "^4.0.0",
     "@angular/core": "^4.0.0",
     "@angular/forms": "^4.0.0",
     "@angular/http": "^4.0.0",
+    "@angular/material": "^2.0.0-beta.7",
     "@angular/platform-browser": "^4.0.0",
     "@angular/platform-browser-dynamic": "^4.0.0",
     "@angular/router": "^4.0.0",
     "core-js": "^2.4.1",
+    "hammerjs": "^2.0.8",
     "rxjs": "^5.1.0",
     "zone.js": "^0.8.4"
   },
@@ -40,6 +42,7 @@
     "karma-coverage-istanbul-reporter": "^1.2.1",
     "karma-jasmine": "~1.1.0",
     "karma-jasmine-html-reporter": "^0.2.2",
+    "node-sass": "^4.5.3",
     "protractor": "~5.1.2",
     "ts-node": "~3.0.4",
     "tslint": "~5.3.2",

src/app/app.component.html

@@ -1,20 +1,3 @@
-<!--The whole content below can be removed with the new code.-->
+<div class="example-container">
-<div style="text-align:center">
+  <fuse-component name="Sercan"></fuse-component>
-  <h1>
-    Welcome to {{title}}!!
-  </h1>
-  <img width="300" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxOS4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHZpZXdCb3g9IjAgMCAyNTAgMjUwIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAyNTAgMjUwOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+DQo8c3R5bGUgdHlwZT0idGV4dC9jc3MiPg0KCS5zdDB7ZmlsbDojREQwMDMxO30NCgkuc3Qxe2ZpbGw6I0MzMDAyRjt9DQoJLnN0MntmaWxsOiNGRkZGRkY7fQ0KPC9zdHlsZT4NCjxnPg0KCTxwb2x5Z29uIGNsYXNzPSJzdDAiIHBvaW50cz0iMTI1LDMwIDEyNSwzMCAxMjUsMzAgMzEuOSw2My4yIDQ2LjEsMTg2LjMgMTI1LDIzMCAxMjUsMjMwIDEyNSwyMzAgMjAzLjksMTg2LjMgMjE4LjEsNjMuMiAJIi8+DQoJPHBvbHlnb24gY2xhc3M9InN0MSIgcG9pbnRzPSIxMjUsMzAgMTI1LDUyLjIgMTI1LDUyLjEgMTI1LDE1My40IDEyNSwxNTMuNCAxMjUsMjMwIDEyNSwyMzAgMjAzLjksMTg2LjMgMjE4LjEsNjMuMiAxMjUsMzAgCSIvPg0KCTxwYXRoIGNsYXNzPSJzdDIiIGQ9Ik0xMjUsNTIuMUw2Ni44LDE4Mi42aDBoMjEuN2gwbDExLjctMjkuMmg0OS40bDExLjcsMjkuMmgwaDIxLjdoMEwxMjUsNTIuMUwxMjUsNTIuMUwxMjUsNTIuMUwxMjUsNTIuMQ0KCQlMMTI1LDUyLjF6IE0xNDIsMTM1LjRIMTA4bDE3LTQwLjlMMTQyLDEzNS40eiIvPg0KPC9nPg0KPC9zdmc+DQo=" />
 </div>
-<h2>Here are some links to help you start: </h2>
-<ul>
-  <li>
-    <h2><a target="_blank" href="https://angular.io/tutorial">Tour of Heroes</a></h2>
-  </li>
-  <li>
-    <h2><a target="_blank" href="https://github.com/angular/angular-cli/wiki">CLI Documentation</a></h2>
-  </li>
-  <li>
-    <h2><a target="_blank" href="http://angularjs.blogspot.ca/">Angular blog</a></h2>
-  </li>
-</ul>
-

src/app/app.module.ts

@@ -1,16 +1,26 @@
 import {BrowserModule} from '@angular/platform-browser';
 import {NgModule} from '@angular/core';
-
+import 'hammerjs';
+import {MaterialModule} from './material.module';
+import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
 import {AppComponent} from './app.component';
+import {FuseDirective, FuseComponent, NameGetterComponent} from './fuse-component/fuse.component';
 
 @NgModule({
     declarations: [
-    AppComponent
+        AppComponent,
+        FuseComponent,
+        FuseDirective,
+        NameGetterComponent
     ],
     imports     : [
-    BrowserModule
+        BrowserModule,
+        BrowserAnimationsModule,
+        MaterialModule
     ],
     providers   : [],
     bootstrap   : [AppComponent]
 })
-export class AppModule { }
+export class AppModule
+{
+}

src/app/fuse-component/fuse.component.html

@@ -0,0 +1,41 @@
+<h3>Normal Buttons</h3>
+<div class="button-row">
+    <button md-button>Flat button</button>
+    <button md-raised-button>Raised button</button>
+    <button md-fab>
+        <md-icon>check</md-icon>
+    </button>
+    <button md-mini-fab>
+        <md-icon>check</md-icon>
+    </button>
+</div>
+
+<h3>Link Buttons</h3>
+<div class="example-button-row">
+    <a md-button routerLink=".">Flat button</a>
+    <a md-raised-button routerLink=".">Raised button</a>
+    <a md-fab routerLink=".">
+        <md-icon>check</md-icon>
+    </a>
+    <a md-mini-fab routerLink=".">
+        <md-icon>check</md-icon>
+    </a>
+</div>
+<h1>
+    {{name}}
+</h1>
+<md-icon svgIcon="thumbs-up"></md-icon>
+
+<md-icon class="mat-icon material-icons" role="img" aria-hidden="true">home</md-icon>
+
+<div fuseDirective></div>
+
+<fuse-name-getter [nameValue]="name">
+
+</fuse-name-getter>
+
+<input type="text"  [value]="name2" (change)="name2=$event.target.value">
+
+<button md-button (click)="name2='Sercan'">
+    {{name2}}
+</button>

src/app/fuse-component/fuse.component.scss

@@ -0,0 +1,8 @@
+:host {
+    background: gray;
+    display: block;
+
+    h3 {
+        color: red;
+    }
+}

src/app/fuse-component/fuse.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { FuseComponent } from './my-new-component.component';
+
+describe('FuseComponent', () => {
+  let component: FuseComponent;
+  let fixture: ComponentFixture<FuseComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ FuseComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(FuseComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/fuse-component/fuse.component.ts

@@ -0,0 +1,62 @@
+import {Component, Directive, ElementRef, Input, OnInit, Output} from '@angular/core';
+
+@Directive({
+    selector: '[fuseDirective]'
+})
+export class FuseDirective
+{
+    @Input('fuseDirective') fuseDirective: string;
+
+    constructor(private el: ElementRef)
+    {
+    }
+}
+
+@Component({
+    selector: 'fuse-name-getter',
+    template: `
+        <h1>
+            {{nameValue}}
+            {{surname}}
+        </h1>
+    `
+})
+export class NameGetterComponent implements OnInit
+{
+    surname: string;
+    @Input('nameValue') nameValue: string;
+
+    constructor()
+    {
+        this.surname = 'HELVACI';
+    }
+
+    ngOnInit()
+    {
+        this.surname = 'Yemen';
+
+    }
+}
+
+@Component({
+    selector   : 'fuse-component',
+    templateUrl: './fuse.component.html',
+    styleUrls  : ['./fuse.component.scss']
+})
+export class FuseComponent implements OnInit
+{
+    name2: string;
+    @Input('name') name: string;
+
+    constructor()
+    {
+    }
+
+
+    ngOnInit()
+    {
+        this.name2 = this.name;
+        console.log(this.name);
+        console.info('on init');
+    }
+}

src/app/material.module.ts

@@ -0,0 +1,17 @@
+import {NgModule} from '@angular/core';
+import {MdButtonModule, MdCheckboxModule} from '@angular/material';
+
+@NgModule({
+    imports: [
+        MdButtonModule,
+        MdCheckboxModule
+    ],
+    exports: [
+        MdButtonModule,
+        MdCheckboxModule
+    ],
+})
+export class MaterialModule
+{
+
+}

src/index.html

@@ -7,6 +7,7 @@
 
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/x-icon" href="favicon.ico">
+  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
 </head>
 <body>
   <app-root></app-root>

src/styles.scss

@@ -1 +1,6 @@
 /* You can add global styles to this file, and also import other style files */
+@import '~@angular/material/prebuilt-themes/deeppurple-amber.css';
+
+h3 {
+    font-weight: bold;
+}

tslint.json

@@ -68,7 +68,7 @@
     "object-literal-sort-keys": false,
     "one-line": [
       true,
-      "check-open-brace",
+      //"check-open-brace",
       "check-catch",
       "check-else",
       "check-whitespace"
@@ -110,13 +110,13 @@
     "directive-selector": [
       true,
       "attribute",
-      "app",
+      "fuse",
       "camelCase"
     ],
     "component-selector": [
       true,
       "element",
-      "app",
+      "fuse",
       "kebab-case"
     ],
     "use-input-property-decorator": true,