ui model created for form

.angulardoc.json

@@ -0,0 +1,4 @@
+{
+  "repoId": "dc74c3fc-29f5-4f36-a554-3e3b89eb26ee",
+  "lastSync": 0
+}

package.json

@@ -23,8 +23,10 @@
     "@angular/platform-browser": "^6.1.0",
     "@angular/platform-browser-dynamic": "^6.1.0",
     "@angular/router": "^6.1.0",
+    "bootstrap": "^4.2.1",
     "core-js": "^2.5.4",
     "hammerjs": "^2.0.8",
+    "ngx-bootstrap": "^3.1.4",
     "rxjs": "^6.0.0",
     "zone.js": "~0.8.26"
   },

src/app/app.component.css

@@ -0,0 +1,27 @@
+.main-heading{
+    text-align: center;
+
+}
+.user-avatar{
+    width: 200px;
+    height: 200px;
+
+}
+.start{
+    margin: 3rem 17rem 3rem 17rem;
+}
+
+.option{
+    width: 30%;
+}
+.optionSelection{
+    width: 70%;
+}
+.main-heading-text{
+    color: rgb(106, 57, 215);
+}
+
+spacer{
+    display: flex;
+    flex-grow: 1; 
+}

src/app/app.component.html

@@ -1,3 +1,129 @@
+<div class="pl-5 pr-5" class="start">
+  <div class="d-flex flex-row main-heading justify-content-between  align-items-center">
+    <h1 class="main-heading-text">avataaars generator</h1>
+   <div>
+    <button mat-flat-button color="primary" class="heading button">Random</button>
+   </div>
+  </div>
+  <mat-divider></mat-divider>
+  <div class="d-flex justify-content-center align-item-center p-2"><img class="user-avatar" alt="avatar" src="/src/assets/avataaars.png"></div>
+  <form [formGroup]="avatarForm" class="d-flex flex-column align-item-between">
+    <div class="d-flex flex-row">
+        <span class="option">Avatar Style  &nbsp; </span>
+        <mat-radio-group  formControlName="avatarStyle" >
+          <mat-radio-button> circle &nbsp; </mat-radio-button>
+          <mat-radio-button> Transparent</mat-radio-button>
+        </mat-radio-group>
+    </div>
+    <div  class="d-flex flex-row justify-content-between  align-items-center">
+      <div class="option">Top</div>
+      <mat-form-field class="optionSelection" >
+          <mat-select formControlName="top">
+            <mat-option>top</mat-option>
+          </mat-select>
+      </mat-form-field>
+    </div>
+
+    <div class="d-flex flex-row justify-content-between  align-items-center">
+        <div class="option">Accessories</div>
+        <mat-form-field class="optionSelection">
+            <mat-select formControlName="accessories">
+              <mat-option>accessories</mat-option>
+            </mat-select>
+          </mat-form-field>
+    </div>
+
+    <div class="d-flex flex-row justify-content-between  align-items-center">  
+        <div class="option">HairColor</div>
+        <mat-form-field class=" optionSelection" >
+      <mat-select formControlName="hairColor">
+        <mat-option>hairColor</mat-option>
+      </mat-select>
+    </mat-form-field>
+  </div>
+
+    <div class="d-flex flex-row justify-content-between  align-items-center">
+        <div class="option">FacialHair</div>
+        <mat-form-field class="optionSelection">
+      <mat-select formControlName="facialHair">
+        <mat-option>facialHair</mat-option>
+      </mat-select>
+    </mat-form-field>
+  </div>
+
+    <div class="d-flex flex-row justify-content-between  align-items-center">
+        <div class="option">FacialHairColor</div>
+        <mat-form-field class=" optionSelection">
+      <mat-select formControlName="facialHairColor">
+        <mat-option>facialHairColor</mat-option>
+      </mat-select>
+      </mat-form-field>
+    </div>
+
+    <div class="d-flex flex-row justify-content-between  align-items-center">
+        <div class="option">Clothes</div>
+        <mat-form-field class=" optionSelection">
+        <mat-select formControlName="clothes">
+          <mat-option>clothes</mat-option>
+        </mat-select>
+      </mat-form-field>
+    </div>
+
+    <div class="d-flex flex-row justify-content-between  align-items-center">
+        <div class="option">ColorFabric</div>
+        <mat-form-field class="optionSelection">
+        <mat-select formControlName="colorFabric">
+          <mat-option>colorFabric</mat-option>
+        </mat-select>
+      </mat-form-field>
+    </div>
+
+    <div class="d-flex flex-row justify-content-between  align-items-center">
+        <div class="option">Eyes</div>
+        <mat-form-field class="optionSelection">
+          <mat-select formControlName="eyes">
+            <mat-option>eyes</mat-option>
+          </mat-select>
+      </mat-form-field>
+    </div>
+
+      <div class="d-flex flex-row justify-content-between  align-items-center">
+          <div class="option">Eyebrows</div>
+          <mat-form-field class="optionSelection">
+          <mat-select formControlName="eyebrow">
+            <mat-option>eyebrow</mat-option>
+          </mat-select>
+      </mat-form-field>
+    </div>
+
+      <div class="d-flex flex-row justify-content-between  align-items-center">
+          <div class="option">Mouth</div>
+          <mat-form-field class="optionSelection">
+          <mat-select formControlName="mouth">
+            <mat-option>mouth</mat-option>
+          </mat-select>
+      </mat-form-field>
+    </div>
+
+      <div class="d-flex flex-row justify-content-between  align-items-center">
+          <div class="option">Skin</div>
+          <mat-form-field class="optionSelection">
+          <mat-select formControlName="skin">
+            <mat-option>skin</mat-option>
+          </mat-select>
+      </mat-form-field>    
+    </div>
+    <div  class="d-flex flex-row justify-content-between  align-items-center">
+        <div class="spacer option"></div>
+        <div class="optionSelection d-flex flex-row">
+              <button mat-flat-button color="primary" class="png_icon m-1 spacer">PNG</button>
+              <button mat-flat-button color="primary" class="svg_icon m-1 spacer">SVG</button>
+              <button mat-flat-button color="primary" class="showangular_icon m-1 spacer">Show Angular</button>
+              <button mat-flat-button color="primary" class="showimage_icon m-1 spacer">Show image </button>
+          </div>
+          <button mat-flat-button color="primary" class="tweet_icon">Tweet</button>
 
-  <app-avtaar></app-avtaar>
-
+    </div>
+
+  </form>
+</div>

src/app/app.component.ts

@@ -1,10 +1,30 @@
-import { Component } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
+import { FormControl, FormGroup } from '@angular/forms';
 
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
 })
-export class AppComponent {
+export class AppComponent implements OnInit {
   title = 'Avtaar-Generator';
+  avatarForm: FormGroup;
+
+  ngOnInit(){
+    this.avatarForm = new FormGroup ({
+      'avatarStyle': new FormControl(''),
+      'top': new FormControl(''),
+      'accessories': new FormControl(''),
+      'hairColor': new FormControl(''),
+      'facialHair': new FormControl(''),
+      'facialHairColor': new FormControl(''),
+      'clothes': new FormControl(''),
+      'colorFabric': new FormControl(''),
+      'eyes': new FormControl(''),
+      'eyebrow': new FormControl(''),
+      'mouth': new FormControl(''),
+      'skin': new FormControl(''),
+    })
+  }
+
 }

src/app/app.module.ts

@@ -1,8 +1,15 @@
+import { MatButtonModule } from '@angular/material/button';
 import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
 import { AppComponent } from './app.component';
 import { AvtaarComponent } from './avtaar/avtaar.component';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import {MatRadioModule} from '@angular/material/radio'; 
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import {MatSelectModule} from '@angular/material/select';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { CommonModule } from '@angular/common';
+import {MatDividerModule} from '@angular/material/divider';
 
 @NgModule({
   declarations: [
@@ -11,7 +18,15 @@ import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
   ],
   imports: [
     BrowserModule,
-    BrowserAnimationsModule
+    BrowserAnimationsModule,
+    MatRadioModule,
+    FormsModule,
+    MatSelectModule,
+    MatFormFieldModule,
+    CommonModule,
+    ReactiveFormsModule,
+    MatDividerModule,
+    MatButtonModule,
   ],
   providers: [],
   bootstrap: [AppComponent]

src/styles.css

@@ -1,4 +1,6 @@
 /* You can add global styles to this file, and also import other style files */
+@import '../node_modules/bootstrap/dist/css/bootstrap.min.css';
+
 html, body {
   height: 100%;
 }