igxAvatar demo refactoring

IgniteUI/igniteui-docfx#78

src/app/app-routing.module.ts

@@ -1,6 +1,8 @@
 import { NgModule } from "@angular/core";
 import { RouterModule, Routes  } from "@angular/router";
-import { AvatarComponent } from "./avatar/avatar.component";
+import { AvatarSample1Component} from "./avatar/avatar-sample-1/avatar-sample-1.component";
+import { AvatarSample2Component} from "./avatar/avatar-sample-2/avatar-sample-2.component";
+import { AvatarSample3Component} from "./avatar/avatar-sample-3/avatar-sample-3.component";
 import { BadgeSample1Component } from "./badge/badge-sample-1/badge-sample-1.component";
 import { BadgeSample2Component } from "./badge/badge-sample-2/badge-sample-2.component";
 import { BadgeSample3Component } from "./badge/badge-sample-3/badge-sample-3.component";
@@ -59,6 +61,18 @@ import { ToggleSample3Component } from "./toggle/toggle-sample-3/toggle-sample-3
 import { ToggleComponent } from "./toggle/toggle.component";
 
 const appRoutes: Routes = [
+  {
+    component: AvatarSample1Component,
+    path: "avatar-sample-1"
+  },
+  {
+    component: AvatarSample2Component,
+    path: "avatar-sample-2"
+  },
+  {
+    component: AvatarSample3Component,
+    path: "avatar-sample-3"
+  },
   {
     component: BadgeSample1Component,
     path: "badge-sample-1"
@@ -171,10 +185,6 @@ const appRoutes: Routes = [
     component: RadioSample2Component,
     path: "radio-sample-2"
   },
-  {
-    component: AvatarComponent,
-    path: "avatar"
-  },
   {
     component: FormElementsComponent,
     path: "form-elements"

src/app/app.module.ts

@@ -38,7 +38,9 @@ import {
 import { HttpClientModule } from "@angular/common/http";
 import { AppRoutingModule } from "./app-routing.module";
 import { AppComponent } from "./app.component";
-import { AvatarComponent } from "./avatar/avatar.component";
+import { AvatarSample1Component } from "./avatar/avatar-sample-1/avatar-sample-1.component";
+import { AvatarSample2Component } from "./avatar/avatar-sample-2/avatar-sample-2.component";
+import { AvatarSample3Component } from "./avatar/avatar-sample-3/avatar-sample-3.component";
 import { BadgeSample1Component } from "./badge/badge-sample-1/badge-sample-1.component";
 import { BadgeSample2Component } from "./badge/badge-sample-2/badge-sample-2.component";
 import { BadgeSample3Component } from "./badge/badge-sample-3/badge-sample-3.component";
@@ -127,7 +129,6 @@ import { ToggleComponent } from "./toggle/toggle.component";
     DialogComponent,
     DatepickerComponent,
     SnackbarComponent,
-    AvatarComponent,
     FormElementsComponent,
     LayoutComponent,
     NavdrawerComponent,
@@ -160,7 +161,10 @@ import { ToggleComponent } from "./toggle/toggle.component";
     ToggleSample1Component,
     ToggleSample2Component,
     ToggleSample3Component,
-    LabelInputComponent
+    LabelInputComponent,
+    AvatarSample1Component,
+    AvatarSample2Component,
+    AvatarSample3Component
   ],
   imports: [
     AppRoutingModule,

src/app/avatar/avatar-sample-1/avatar-sample-1.component.html

@@ -0,0 +1,6 @@
+<igx-avatar initials="JS" 
+            [roundShape]="isCircular" 
+            size="medium" 
+            [bgColor]="bgColor" 
+            [color]="color">
+</igx-avatar>

src/app/avatar/avatar-sample-1/avatar-sample-1.component.ts

@@ -0,0 +1,19 @@
+import { Component, OnInit } from "@angular/core";
+
+@Component({
+  selector: "app-avatar-sample-1",
+  styleUrls: ["./avatar-sample-1.component.css"],
+  templateUrl: "./avatar-sample-1.component.html"
+})
+export class AvatarSample1Component implements OnInit {
+
+  public bgColor = "#0375be";
+  public color = "black";
+  public isCircular = true;
+
+  constructor() { }
+
+  public ngOnInit() {
+  }
+
+}

src/app/avatar/avatar-sample-2/avatar-sample-2.component.html

@@ -0,0 +1,4 @@
+<igx-avatar [src]="imgSource"
+            roundShape="true"
+            size="large">
+</igx-avatar>

src/app/avatar/avatar-sample-2/avatar-sample-2.component.ts

@@ -0,0 +1,17 @@
+import { Component, OnInit } from "@angular/core";
+
+@Component({
+  selector: "app-avatar-sample-2",
+  styleUrls: ["./avatar-sample-2.component.css"],
+  templateUrl: "./avatar-sample-2.component.html"
+})
+export class AvatarSample2Component implements OnInit {
+
+  public imgSource = "https://randomuser.me/api/portraits/men/1.jpg";
+
+  constructor() { }
+
+  public ngOnInit() {
+  }
+
+}

src/app/avatar/avatar-sample-3/avatar-sample-3.component.html

@@ -0,0 +1,15 @@
+<div class="sample-content">
+  <section class="sample-column">
+    <article class="avatars-wrapper">
+        <div class="avatar-sample">
+            <igx-avatar initials="JS" bgColor="#ACBEDC" size="small"></igx-avatar>
+        </div>
+        <div class="avatar-sample">
+            <igx-avatar src="https://randomuser.me/api/portraits/men/3.jpg" roundShape="true" size="medium"></igx-avatar>
+        </div>
+        <div class="avatar-sample">
+            <igx-avatar initials="AZ" [roundShape]="'true'" bgColor="#ADBDBB" color="#424242" size="large"></igx-avatar>
+        </div>
+    </article>
+  </section>
+</div>

src/app/avatar/avatar-sample-3/avatar-sample-3.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from "@angular/core";
+
+@Component({
+  selector: "app-avatar-sample-3",
+  styleUrls: ["./avatar-sample-3.component.css"],
+  templateUrl: "./avatar-sample-3.component.html"
+})
+export class AvatarSample3Component implements OnInit {
+
+  constructor() { }
+
+  public ngOnInit() {
+  }
+
+}