Angular Assignment

Day-1/src/app/app.component.css

+

Day-1/src/app/app.component.html

+
+<div class="header">
+    <i class='fab fa-asymmetrik' style='font-size:100px;color:white;float:left'></i>
+<h1>Welcome to Adventure Land</h1>
+<h3>Discover the magic of FUN!!</h3></div>
+<app-comp1></app-comp1>
\ No newline at end of file

Day-1/src/app/app.component.spec.ts

+import { TestBed } from '@angular/core/testing';
+import { AppComponent } from './app.component';
+
+describe('AppComponent', () => {
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [
+        AppComponent
+      ],
+    }).compileComponents();
+  });
+
+  it('should create the app', () => {
+    const fixture = TestBed.createComponent(AppComponent);
+    const app = fixture.componentInstance;
+    expect(app).toBeTruthy();
+  });
+
+  it(`should have as title 'first-angularjs'`, () => {
+    const fixture = TestBed.createComponent(AppComponent);
+    const app = fixture.componentInstance;
+    expect(app.title).toEqual('first-angularjs');
+  });
+
+  it('should render title', () => {
+    const fixture = TestBed.createComponent(AppComponent);
+    fixture.detectChanges();
+    const compiled = fixture.nativeElement;
+    expect(compiled.querySelector('.content span').textContent).toContain('first-angularjs app is running!');
+  });
+});

Day-1/src/app/app.component.ts

+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-root',
+  templateUrl: './app.component.html',
+  styleUrls: ['./app.component.css']
+})
+export class AppComponent {
+  title = 'first-angularjs';
+}

Day-1/src/app/app.module.ts

+import { BrowserModule } from '@angular/platform-browser';
+import { NgModule } from '@angular/core';
+
+import { AppComponent } from './app.component';
+import { Comp1Component } from './comp1/comp1.component';
+
+@NgModule({
+  declarations: [
+    AppComponent,
+    Comp1Component
+  ],
+  imports: [
+    BrowserModule
+  ],
+  providers: [],
+  bootstrap: [AppComponent]
+})
+export class AppModule { }

Day-1/src/app/comp1/comp1.component.html

+
+<div class="dropdown">
+    <button class="dropbtn"><i class='fab fa-asymmetrik' style="font-size: 40px;"></i>Things You Can Find Here..</button>
+    <div class="dropdown-content">
+    <a href="#">Water Rides</a>
+    <a href="#">Land Rides</a>
+    <a href="#">High Thrill Rides</a>
+    <a href="#">Kids Rides</a>
+    </div>
+  </div>
\ No newline at end of file

Day-1/src/app/comp1/comp1.component.spec.ts

+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { Comp1Component } from './comp1.component';
+
+describe('Comp1Component', () => {
+  let component: Comp1Component;
+  let fixture: ComponentFixture<Comp1Component>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ Comp1Component ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(Comp1Component);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

Day-1/src/app/comp1/comp1.component.ts

+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-comp1',
+  templateUrl: './comp1.component.html',
+  styleUrls: ['./comp1.component.css']
+})
+export class Comp1Component implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

Day-1/src/environments/environment.prod.ts

+export const environment = {
+  production: true
+};

Day-1/src/environments/environment.ts

+// This file can be replaced during build by using the `fileReplacements` array.
+// `ng build --prod` replaces `environment.ts` with `environment.prod.ts`.
+// The list of file replacements can be found in `angular.json`.
+
+export const environment = {
+  production: false
+};
+
+/*
+ * For easier debugging in development mode, you can import the following file
+ * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`.
+ *
+ * This import should be commented out in production mode because it will have a negative impact
+ * on performance if an error is thrown.
+ */
+// import 'zone.js/dist/zone-error';  // Included with Angular CLI.

Day-1/src/index.html

+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>FirstAngularjs</title>
+  <base href="/">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="icon" type="image/x-icon" href="favicon.ico">
+  <script src='https://kit.fontawesome.com/a076d05399.js'></script>
+</head>
+<body>
+  <app-root></app-root>
+</body>
+</html>

Day-1/src/main.ts

+import { enableProdMode } from '@angular/core';
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+
+import { AppModule } from './app/app.module';
+import { environment } from './environments/environment';
+
+if (environment.production) {
+  enableProdMode();
+}
+
+platformBrowserDynamic().bootstrapModule(AppModule)
+  .catch(err => console.error(err));

Day-1/src/polyfills.ts

+/**
+ * This file includes polyfills needed by Angular and is loaded before the app.
+ * You can add your own extra polyfills to this file.
+ *
+ * This file is divided into 2 sections:
+ *   1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
+ *   2. Application imports. Files imported after ZoneJS that should be loaded before your main
+ *      file.
+ *
+ * The current setup is for so-called "evergreen" browsers; the last versions of browsers that
+ * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera),
+ * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile.
+ *
+ * Learn more in https://angular.io/guide/browser-support
+ */
+
+/***************************************************************************************************
+ * BROWSER POLYFILLS
+ */
+
+/** IE11 requires the following for NgClass support on SVG elements */
+// import 'classlist.js';  // Run `npm install --save classlist.js`.
+
+/**
+ * Web Animations `@angular/platform-browser/animations`
+ * Only required if AnimationBuilder is used within the application and using IE/Edge or Safari.
+ * Standard animation support in Angular DOES NOT require any polyfills (as of Angular 6.0).
+ */
+// import 'web-animations-js';  // Run `npm install --save web-animations-js`.
+
+/**
+ * By default, zone.js will patch all possible macroTask and DomEvents
+ * user can disable parts of macroTask/DomEvents patch by setting following flags
+ * because those flags need to be set before `zone.js` being loaded, and webpack
+ * will put import in the top of bundle, so user need to create a separate file
+ * in this directory (for example: zone-flags.ts), and put the following flags
+ * into that file, and then add the following code before importing zone.js.
+ * import './zone-flags';
+ *
+ * The flags allowed in zone-flags.ts are listed here.
+ *
+ * The following flags will work for all browsers.
+ *
+ * (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame
+ * (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick
+ * (window as any).__zone_symbol__UNPATCHED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames
+ *
+ *  in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js
+ *  with the following flag, it will bypass `zone.js` patch for IE/Edge
+ *
+ *  (window as any).__Zone_enable_cross_context_check = true;
+ *
+ */
+
+/***************************************************************************************************
+ * Zone JS is required by default for Angular itself.
+ */
+import 'zone.js/dist/zone';  // Included with Angular CLI.
+
+
+/***************************************************************************************************
+ * APPLICATION IMPORTS
+ */

Day-1/src/styles.css

+/* You can add global styles to this file, and also import other style files */
+body{
+    background-image: url("C:\Sprint6\AngularJS\first-angularjs\src\assets\background.jpg");
+    background-size: 100% 100%; 
+    background-position: center center; 
+    background-repeat: no-repeat; 
+    background-attachment: fixed; 
+    
+}
+.header h1{
+    text-align: right;
+    font-size: 58px;
+    font-style: italic;
+    color:white;
+    animation-name: head;
+     animation-duration: 10s;
+     
+}
+    @keyframes head {
+        0%   {color:white;}
+        25%  {color:orange;}
+        50%  {color:mistyrose; }
+        75%  {color:lime;}
+        100% {color:white;}
+      }
+.header h3{
+    text-align: right;
+    font-size: 40px;
+    font-style: italic;
+    color:white;
+    transition: font-size 2s;
+}
+.header h3:hover{
+    font-size: 50px;
+  }
+.body {
+      float: right;
+      background-color: mistyrose;
+      width: 300px;
+      height: 60px;
+      text-align: center;
+  }
+  .body h4{
+      font-size: 20px;
+  }
+  .dropdown {
+    position: relative;
+    display: inline-block;
+    float: right;
+  }
+  .dropbtn {
+    background-color: mistyrose;
+    padding: 16px;
+    font-size: 16px;
+    font-weight: bold;
+    cursor: pointer;
+  }
+  
+  .dropdown-content {
+    display: none;
+    position: absolute;
+    background-color: #f9f9f9;
+    min-width: 160px;
+    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
+    z-index: 1;
+  }
+  
+  .dropdown-content a {
+    color: black;
+    padding: 12px 16px;
+    text-decoration: none;
+    display: block;
+  }
+  
+  .dropdown-content a:hover {background-color:teal;color:white}
+  
+  .dropdown:hover .dropdown-content {
+    display: block;
+  }
+  
+  .dropdown:hover .dropbtn {
+    background-color:teal;
+    color:white;
+    font-size: 20px;
+  }

Day-1/src/test.ts

+// This file is required by karma.conf.js and loads recursively all the .spec and framework files
+
+import 'zone.js/dist/zone-testing';
+import { getTestBed } from '@angular/core/testing';
+import {
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting
+} from '@angular/platform-browser-dynamic/testing';
+
+declare const require: {
+  context(path: string, deep?: boolean, filter?: RegExp): {
+    keys(): string[];
+    <T>(id: string): T;
+  };
+};
+
+// First, initialize the Angular testing environment.
+getTestBed().initTestEnvironment(
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting()
+);
+// Then we find all the tests.
+const context = require.context('./', true, /\.spec\.ts$/);
+// And load the modules.
+context.keys().map(context);

Day-2/src/app/app.component.css

+.string{
+    font-size: 30px;
+    font-style: italic;
+    font-weight: bold;
+    border :8px dashed black
+}
+.property img{
+    
+    float:right;
+}
+.property p{
+    font-size: 30px;
+    font-style: italic;
+    font-weight: bold;
+}
+button{
+    font-size: 30px;
+    border:4px solid black;
+    margin-right: 15px;
+}
+button:hover{
+    background-color: red;
+    color:white
+
+}
+button:active{
+    background-color: green;
+    color: white;
+}
+h3{
+    font-size: 25px;
+    color:white;
+    background-color: rgb(83, 20, 20);
+    padding: 20px;
+}
+p{
+    font-size: 20px;
+}
\ No newline at end of file

Day-2/src/app/app.component.html

+<h1 style="border: 6px solid black;font-size:50px;color:red;">Let's work on some data binding concepts.....</h1>
+<h1 style="color:white;background-color:red;border: 2px solid black;">Hiii,I'm a specified template and styles are applied to me using Inline style sheets</h1> 
+<div class="string">
+  {{name}};
+</div>
+<div class="property">
+<img [src]="image" >
+<p>{{name1}}</p>
+</div>
+<h2 style="font-size:30px"> Event Binding Example</h2>  
+<button (click)="onClick()" (mouseover)='onMouseOver()'>Event Binding</button> <!--Event Binding-->  
+<button (click)="onButtonClicked()">Change Name</button>
+<h2 style="font-size:30px">Two-way Binding Example</h2>    
+   <input [(ngModel)]="name2" /> <br/><br/>    
+<p> {{name2}} </p> 
+
+<h1 style="border: 6px solid black;font-size:50px;color:red;">Let's work on component communication.....</h1>
+<h3>Parent To Child :<p><app-comp1 [childMessage]="parentMessage"></app-comp1></p></h3>
+
+<h3>Child to Parent :<p>Message: {{ message1 }}<app-comp1></app-comp1></p></h3>
+
+<h3>Child to Parent :<p>Message: {{message2}}<app-comp2 (messageEvent)="receiveMessage($event)"></app-comp2></p></h3>
\ No newline at end of file

Day-2/src/app/app.component.spec.ts

+import { TestBed } from '@angular/core/testing';
+import { AppComponent } from './app.component';
+
+describe('AppComponent', () => {
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [
+        AppComponent
+      ],
+    }).compileComponents();
+  });
+
+  it('should create the app', () => {
+    const fixture = TestBed.createComponent(AppComponent);
+    const app = fixture.componentInstance;
+    expect(app).toBeTruthy();
+  });
+
+  it(`should have as title 'second-angularjs'`, () => {
+    const fixture = TestBed.createComponent(AppComponent);
+    const app = fixture.componentInstance;
+    expect(app.title).toEqual('second-angularjs');
+  });
+
+  it('should render title', () => {
+    const fixture = TestBed.createComponent(AppComponent);
+    fixture.detectChanges();
+    const compiled = fixture.nativeElement;
+    expect(compiled.querySelector('.content span').textContent).toContain('second-angularjs app is running!');
+  });
+});

Day-2/src/app/app.component.ts

+import { Component,ViewChild,AfterViewInit } from '@angular/core';
+import { Comp1Component} from "./comp1/comp1.component";
+
+
+
+@Component({
+  selector: 'app-root',
+  templateUrl: './app.component.html',
+/* styles: [`
+  h1 {
+    border: 6px solid black;
+    font-size:50px;
+    color:red;
+  }
+`]*/
+
+  styleUrls: ['./app.component.css']
+})
+export class AppComponent {
+  title = 'second-angularjs';
+  name="Hii,I'm a string interpolation"
+  image="https://th.bing.com/th/id/OIP.7qISUYZ8rM9inWDkOSEW5AFNC7?w=305&h=180&c=7&o=5&pid=1.7"
+  name1="Helloooo,This image is an example of property binding --------------------------------"
+  name2= "Enter the text";   
+  constructor(){}  
+  onClick(){    
+    alert("Button is binded using event binding!");    
+  }    
+  onMouseOver(){
+    console.log("Button hovered using event binding")
+  }
+  onButtonClicked() {
+    this.name = 'Text changed using event binding'
+  }  
+
+  parentMessage = "Parent is sending message to child via Input decorator "
+
+  @ViewChild(Comp1Component) child:any;
+  message1:any;
+
+  ngAfterViewInit() {
+    this.message1 = this.child.message1
+  }
+
+  message2:any;
+
+  receiveMessage($event: any) {
+    this.message2 = $event
+  }
+
+}

Day-2/src/app/app.module.ts

+import { BrowserModule } from '@angular/platform-browser';
+import { NgModule } from '@angular/core';
+import {FormsModule} from '@angular/forms'; 
+import { AppComponent } from './app.component';
+import { Comp1Component } from './comp1/comp1.component';
+import { Comp2Component } from './comp2/comp2.component';
+
+@NgModule({
+  declarations: [
+    AppComponent,
+    Comp1Component,
+    Comp2Component
+  ],
+  imports: [
+    BrowserModule,
+    FormsModule 
+  ],
+  providers: [],
+  bootstrap: [AppComponent]
+})
+export class AppModule { }

Day-2/src/app/comp1/comp1.component.html

+Say {{ childMessage }}  
\ No newline at end of file

Day-2/src/app/comp1/comp1.component.spec.ts

+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { Comp1Component } from './comp1.component';
+
+describe('Comp1Component', () => {
+  let component: Comp1Component;
+  let fixture: ComponentFixture<Comp1Component>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ Comp1Component ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(Comp1Component);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

Day-2/src/app/comp1/comp1.component.ts

+import { Component, OnInit ,Input} from '@angular/core';
+
+@Component({
+  selector: 'app-comp1',
+  templateUrl: './comp1.component.html',
+  //template:'Say {{ childMessage }}  <button (click)="sendMessage()">Send Message</button>',
+  styleUrls: ['./comp1.component.css']
+
+})
+export class Comp1Component implements OnInit {
+  @Input() childMessage:any;
+  message1 = 'Child is sending message to parent via ViewChild ';
+
+ 
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

Day-2/src/app/comp2/comp2.component.html

+<button (click)="sendMessage()">Send Message</button>

Day-2/src/app/comp2/comp2.component.spec.ts

+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { Comp2Component } from './comp2.component';
+
+describe('Comp2Component', () => {
+  let component: Comp2Component;
+  let fixture: ComponentFixture<Comp2Component>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ Comp2Component ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(Comp2Component);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

Day-2/src/app/comp2/comp2.component.ts

+import { Component, OnInit,Output,EventEmitter } from '@angular/core';
+
+@Component({
+  selector: 'app-comp2',
+  templateUrl: './comp2.component.html',
+  styleUrls: ['./comp2.component.css']
+})
+export class Comp2Component implements OnInit {
+  message2: string = "Child is sending message to parent via Output() and EventEmitter!"
+
+  @Output() messageEvent = new EventEmitter<string>();
+  sendMessage() {
+    this.messageEvent.emit(this.message2)
+  }
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

Day-2/src/environments/environment.prod.ts

+export const environment = {
+  production: true
+};

Day-2/src/environments/environment.ts

+// This file can be replaced during build by using the `fileReplacements` array.
+// `ng build --prod` replaces `environment.ts` with `environment.prod.ts`.
+// The list of file replacements can be found in `angular.json`.
+
+export const environment = {
+  production: false
+};
+
+/*
+ * For easier debugging in development mode, you can import the following file
+ * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`.
+ *
+ * This import should be commented out in production mode because it will have a negative impact
+ * on performance if an error is thrown.
+ */
+// import 'zone.js/dist/zone-error';  // Included with Angular CLI.

Day-2/src/index.html

+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>SecondAngularjs</title>
+  <base href="/">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="icon" type="image/x-icon" href="favicon.ico">
+</head>
+<body>
+  <app-root></app-root>
+</body>
+</html>

Day-2/src/main.ts

+import { enableProdMode } from '@angular/core';
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+
+import { AppModule } from './app/app.module';
+import { environment } from './environments/environment';
+
+if (environment.production) {
+  enableProdMode();
+}
+
+platformBrowserDynamic().bootstrapModule(AppModule)
+  .catch(err => console.error(err));

Day-2/src/polyfills.ts

+/**
+ * This file includes polyfills needed by Angular and is loaded before the app.
+ * You can add your own extra polyfills to this file.
+ *
+ * This file is divided into 2 sections:
+ *   1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
+ *   2. Application imports. Files imported after ZoneJS that should be loaded before your main
+ *      file.
+ *
+ * The current setup is for so-called "evergreen" browsers; the last versions of browsers that
+ * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera),
+ * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile.
+ *
+ * Learn more in https://angular.io/guide/browser-support
+ */
+
+/***************************************************************************************************
+ * BROWSER POLYFILLS
+ */
+
+/** IE11 requires the following for NgClass support on SVG elements */
+// import 'classlist.js';  // Run `npm install --save classlist.js`.
+
+/**
+ * Web Animations `@angular/platform-browser/animations`
+ * Only required if AnimationBuilder is used within the application and using IE/Edge or Safari.
+ * Standard animation support in Angular DOES NOT require any polyfills (as of Angular 6.0).
+ */
+// import 'web-animations-js';  // Run `npm install --save web-animations-js`.
+
+/**
+ * By default, zone.js will patch all possible macroTask and DomEvents
+ * user can disable parts of macroTask/DomEvents patch by setting following flags
+ * because those flags need to be set before `zone.js` being loaded, and webpack
+ * will put import in the top of bundle, so user need to create a separate file
+ * in this directory (for example: zone-flags.ts), and put the following flags
+ * into that file, and then add the following code before importing zone.js.
+ * import './zone-flags';
+ *
+ * The flags allowed in zone-flags.ts are listed here.
+ *
+ * The following flags will work for all browsers.
+ *
+ * (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame
+ * (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick
+ * (window as any).__zone_symbol__UNPATCHED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames
+ *
+ *  in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js
+ *  with the following flag, it will bypass `zone.js` patch for IE/Edge
+ *
+ *  (window as any).__Zone_enable_cross_context_check = true;
+ *
+ */
+
+/***************************************************************************************************
+ * Zone JS is required by default for Angular itself.
+ */
+import 'zone.js/dist/zone';  // Included with Angular CLI.
+
+
+/***************************************************************************************************
+ * APPLICATION IMPORTS
+ */

Day-2/src/styles.css

+/* You can add global styles to this file, and also import other style files */

Day-2/src/test.ts

+// This file is required by karma.conf.js and loads recursively all the .spec and framework files
+
+import 'zone.js/dist/zone-testing';
+import { getTestBed } from '@angular/core/testing';
+import {
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting
+} from '@angular/platform-browser-dynamic/testing';
+
+declare const require: {
+  context(path: string, deep?: boolean, filter?: RegExp): {
+    keys(): string[];
+    <T>(id: string): T;
+  };
+};
+
+// First, initialize the Angular testing environment.
+getTestBed().initTestEnvironment(
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting()
+);
+// Then we find all the tests.
+const context = require.context('./', true, /\.spec\.ts$/);
+// And load the modules.
+context.keys().map(context);

Day-3/src/app/app.component.css

+h1 {
+    font-size: 30px;
+    border: 5px solid black;
+    color:red;
+  } 
+  h5{
+    font-size: 30px;
+    color:red;
+}
+.color:hover { color: red; }
+.size { font-size: 20px; }
\ No newline at end of file

Day-3/src/app/app.component.html

+<h1>Let's work on some View Encapsulation</h1>
+<h5>Heyyyyyy.......Encapsulation</h5>
+<app-view1></app-view1>
+<h1>Let's work on some Angular Directives</h1>
+<button (click)="component()">Component Directives</button> 
+<button (click)="structural()">Structural Directives</button> 
+<button (click)="attribute()">Attribute Directives</button> 
+
+<h3>Example of Structural Directives</h3>
+ <ul>
+    <li><h4>*Ng-if <input type="checkbox" [(ngModel)]="showMe" /></h4></li>
+        <p *ngIf="showMe">
+            Helloooo...condition is satisfied,NG-IF has reached :)
+        </p>
+        <p *ngIf="!showMe">
+            Helloooo...condition is not satisfied,NG-IF cannot reach :(
+        </p>
+    <li><h4>*Ng-Switch : <input type='text' [(ngModel)]="num" /></h4></li>
+
+        <div [ngSwitch]="num">
+            <div *ngSwitchCase="'1'">Switched to One</div>
+            <div *ngSwitchCase="'2'">Switched to Two</div>
+            <div *ngSwitchCase="'3'">Switched to Three</div>
+            <div *ngSwitchCase="'4'">Switched to Four</div>
+            <div *ngSwitchCase="'5'">Switched to Five</div>
+            <div *ngSwitchDefault>This is Default</div>
+        </div>
+        <li><h4>*Ng-For :</h4></li>
+        <div *ngFor="let item of items">
+            <p >  {{item}} </p>
+           </div>
+           
+</ul>
+<h3>Example of Attribute Directives</h3>
+<ul>
+    <li><h4>Ng-Class :</h4></li>
+    <div [ngClass]="'color size'">Helloooo........I'm Ng-Class from attribute directive used to add/remove css classes</div>
+    <li><h4>Ng-Style :</h4></li>
+    <p [ngStyle]="{'color': 'purple',
+               'font-size': '24px',
+               'font-weight': 'bold',
+            'font-style':'italic'}">Helloooo........I'm Ng-Style from attribute directive used to apply styles</p>
+</ul>
+
+<h1>Let's work on some Pipes</h1>
+<button (click)="pipe()">Pipes</button> 
+<p>Unformatted text:{{msg}} </p>
+<p> Unformatted number:{{num1}}</p>
+<p>Unformatted Percentage:{{per}} </p>
+<p>Unformatted currency:{{cur}} </p>
+<h3>Example of different built-in Pipes</h3>
+<ul>
+    <li><h4>Lowercasepipe</h4></li>
+        <p>{{msg | lowercase}} </p>
+    <li><h4>Uppercasepipe</h4></li>
+        <p>{{msg | uppercase}} </p>
+    <li><h4>Datepipe</h4></li>
+         <p>{{toDate | date}} </p> <!--date='medium,short,long,mediumtime,longDate'... can be written to get different types of dates -->
+    <li><h4>Currencypipe</h4></li>
+        <p>Example 1 :{{cur | currency }} </p>
+        <p>Example 2 :{{cur | currency:'INR':true:'5.5'}} </p>
+    <li><h4>Jsonpipe</h4></li>
+        <p>{{myObject | json}}</p>
+    <li><h4> Percentpipe</h4></li>
+        <p>Example 1 :{{per | percent }} </p>
+        <p>Example 2 :{{per | percent:'1.8'}} </p>
+    <li><h4>Decimalpipe</h4></li>
+        <p> Example 1 :{{num1 | number}}</p>
+        <p> Example 2 :{{num1 | number:'9.4'}}</p>
+    <li><h4>SlicePipe:</h4></li>
+        <p>{{msg | slice:1:10}} </p>
+</ul>
+<h3>Example of custom Pipes</h3>
+<ul>
+    <li><h4>Square root Pipe:</h4></li>
+        <p>{{num2 | sqrt}}</p>
+    <li><h4>Square Pipe:</h4></li>
+        <p>{{num2 | square}}</p>
+    
+</ul>
+<h1>Let's Know about Services and Dependency Injection</h1>
+<button (click)="service()">Services</button> 
+<button (click)="di()">Dependency Injection</button> 
\ No newline at end of file

Day-3/src/app/app.component.spec.ts

+import { TestBed } from '@angular/core/testing';
+import { AppComponent } from './app.component';
+
+describe('AppComponent', () => {
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [
+        AppComponent
+      ],
+    }).compileComponents();
+  });
+
+  it('should create the app', () => {
+    const fixture = TestBed.createComponent(AppComponent);
+    const app = fixture.componentInstance;
+    expect(app).toBeTruthy();
+  });
+
+  it(`should have as title 'third-angularjs'`, () => {
+    const fixture = TestBed.createComponent(AppComponent);
+    const app = fixture.componentInstance;
+    expect(app.title).toEqual('third-angularjs');
+  });
+
+  it('should render title', () => {
+    const fixture = TestBed.createComponent(AppComponent);
+    fixture.detectChanges();
+    const compiled = fixture.nativeElement;
+    expect(compiled.querySelector('.content span').textContent).toContain('third-angularjs app is running!');
+  });
+});

Day-3/src/app/app.component.ts

+import { Component,ViewEncapsulation } from '@angular/core';
+import { LoggingService } from './logging.service';
+
+@Component({
+  selector: 'app-root',
+  templateUrl: './app.component.html',
+  styleUrls: ['./app.component.css'],
+  encapsulation:ViewEncapsulation.Emulated
+  //encapsulation:ViewEncapsulation.ShadowDOM
+ //encapsulation:ViewEncapsulation.None
+})
+export class AppComponent {
+  title = 'third-angularjs';
+  showMe:any;
+  num:any;
+  items = ["Milk", "Apple", "Butter", "Bread"];
+  msg: string= 'Angular Pipes';
+  toDate: Date = new Date();
+  num1: number= 9542342.14554;
+  per: number= .34724;
+  cur: number= 543;
+  myObject = {
+    id: 1,
+    name: "Nousheen",
+    company: "nisum",
+    college: "MJCET"
+  };
+  num2:number=5;
+  component() {
+    alert("They are used in the main class  and is declared by @Component. It contains the details on component processing, instantiated and usage at run time.")
+    
+  }
+  structural(){
+    alert("They start with a * sign. These directives are used to manipulate and change the structure of the DOM elements. Example:*ngIf directive, *ngSwitch directive, and *ngFor directive")
+  }
+  attribute(){
+    alert("They are used to change the look and behavior of the DOM elements. Example: ngClass directive, and ngStyle directive etc")
+  }
+  pipe(){
+    alert("Pipes are  used to transform data. It is denoted by symbol |")
+  }
+  constructor(private loggingService: LoggingService) {
+		this.loggingService.logSomeMessage("Hello...I'm AppComponent !")
+  }
+  service(){
+    alert("Angular services are singleton objects that get instantiated only once during the lifetime of an application.@Injectable() decorator accepts a metadata object for the service,that allows Angular to inject it into a component as a dependency.A provider is an object that tells an injector how to obtain or create a dependency.    ")
+  }
+  di(){
+    alert(" It is used for injecting the service into a component, giving the component access to that service class.")
+  }
+}
+ 

Day-3/src/app/app.module.ts

+import { BrowserModule } from '@angular/platform-browser';
+import { NgModule } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { AppComponent } from './app.component';
+import { SqrtPipe } from './sqrt.pipe';
+import { SquarePipe } from './square.pipe';
+import { View1Component } from './view1/view1.component';
+
+
+
+@NgModule({
+  declarations: [
+    AppComponent,
+    SqrtPipe,
+    SquarePipe,
+    View1Component
+   
+    
+  ],
+  imports: [
+    BrowserModule,
+    FormsModule
+  ],
+  providers: [],
+  bootstrap: [AppComponent]
+})
+export class AppModule { }

Day-3/src/app/logging.service.spec.ts

+import { TestBed } from '@angular/core/testing';
+
+import { LoggingService } from './logging.service';
+
+describe('LoggingService', () => {
+  let service: LoggingService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(LoggingService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

Day-3/src/app/logging.service.ts

+import { Injectable } from '@angular/core';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class LoggingService {
+
+  logSomeMessage(msg: any) { 
+		alert("Message : " + msg); 
+	}
+}

Day-3/src/app/sqrt.pipe.spec.ts

+import { SqrtPipe } from './sqrt.pipe';
+
+describe('SqrtPipe', () => {
+  it('create an instance', () => {
+    const pipe = new SqrtPipe();
+    expect(pipe).toBeTruthy();
+  });
+});

Day-3/src/app/sqrt.pipe.ts

+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe ({  
+  name : 'sqrt'  
+})  
+export class SqrtPipe implements PipeTransform {  
+  transform(val : number) : number {  
+    return Math.sqrt(val);  
+  }  
+} 
\ No newline at end of file

Day-3/src/app/square.pipe.spec.ts

+import { SquarePipe } from './square.pipe';
+
+describe('SquarePipe', () => {
+  it('create an instance', () => {
+    const pipe = new SquarePipe();
+    expect(pipe).toBeTruthy();
+  });
+});

Day-3/src/app/square.pipe.ts

+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({
+  name: 'square'
+})
+export class SquarePipe implements PipeTransform {
+
+  transform(value: number): number {
+    return value * value;
+  }
+
+}

Day-3/src/app/view1/view1.component.html

+<h5>Heyyyyyyy........Encapsulation!</h5>
+<h6>Uncomment the lines in app.component.ts to view different encapsulations</h6>

Day-3/src/app/view1/view1.component.spec.ts

+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { View1Component } from './view1.component';
+
+describe('View1Component', () => {
+  let component: View1Component;
+  let fixture: ComponentFixture<View1Component>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ View1Component ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(View1Component);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

Day-3/src/app/view1/view1.component.ts

+import { Component, OnInit,ViewEncapsulation } from '@angular/core';
+
+@Component({
+  selector: 'app-view1',
+  templateUrl: './view1.component.html',
+  styleUrls: ['./view1.component.css'],
+})
+export class View1Component implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

Day-3/src/environments/environment.prod.ts

+export const environment = {
+  production: true
+};

Day-3/src/environments/environment.ts

+// This file can be replaced during build by using the `fileReplacements` array.
+// `ng build --prod` replaces `environment.ts` with `environment.prod.ts`.
+// The list of file replacements can be found in `angular.json`.
+
+export const environment = {
+  production: false
+};
+
+/*
+ * For easier debugging in development mode, you can import the following file
+ * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`.
+ *
+ * This import should be commented out in production mode because it will have a negative impact
+ * on performance if an error is thrown.
+ */
+// import 'zone.js/dist/zone-error';  // Included with Angular CLI.

Day-3/src/index.html

+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>ThirdAngularjs</title>
+  <base href="/">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="icon" type="image/x-icon" href="favicon.ico">
+</head>
+<body>
+  <app-root></app-root>
+</body>
+</html>

Day-3/src/main.ts

+import { enableProdMode } from '@angular/core';
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+
+import { AppModule } from './app/app.module';
+import { environment } from './environments/environment';
+
+if (environment.production) {
+  enableProdMode();
+}
+
+platformBrowserDynamic().bootstrapModule(AppModule)
+  .catch(err => console.error(err));

Day-3/src/polyfills.ts

+/**
+ * This file includes polyfills needed by Angular and is loaded before the app.
+ * You can add your own extra polyfills to this file.
+ *
+ * This file is divided into 2 sections:
+ *   1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
+ *   2. Application imports. Files imported after ZoneJS that should be loaded before your main
+ *      file.
+ *
+ * The current setup is for so-called "evergreen" browsers; the last versions of browsers that
+ * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera),
+ * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile.
+ *
+ * Learn more in https://angular.io/guide/browser-support
+ */
+
+/***************************************************************************************************
+ * BROWSER POLYFILLS
+ */
+
+/** IE11 requires the following for NgClass support on SVG elements */
+// import 'classlist.js';  // Run `npm install --save classlist.js`.
+
+/**
+ * Web Animations `@angular/platform-browser/animations`
+ * Only required if AnimationBuilder is used within the application and using IE/Edge or Safari.
+ * Standard animation support in Angular DOES NOT require any polyfills (as of Angular 6.0).
+ */
+// import 'web-animations-js';  // Run `npm install --save web-animations-js`.
+
+/**
+ * By default, zone.js will patch all possible macroTask and DomEvents
+ * user can disable parts of macroTask/DomEvents patch by setting following flags
+ * because those flags need to be set before `zone.js` being loaded, and webpack
+ * will put import in the top of bundle, so user need to create a separate file
+ * in this directory (for example: zone-flags.ts), and put the following flags
+ * into that file, and then add the following code before importing zone.js.
+ * import './zone-flags';
+ *
+ * The flags allowed in zone-flags.ts are listed here.
+ *
+ * The following flags will work for all browsers.
+ *
+ * (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame
+ * (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick
+ * (window as any).__zone_symbol__UNPATCHED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames
+ *
+ *  in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js
+ *  with the following flag, it will bypass `zone.js` patch for IE/Edge
+ *
+ *  (window as any).__Zone_enable_cross_context_check = true;
+ *
+ */
+
+/***************************************************************************************************
+ * Zone JS is required by default for Angular itself.
+ */
+import 'zone.js/dist/zone';  // Included with Angular CLI.
+
+
+/***************************************************************************************************
+ * APPLICATION IMPORTS
+ */

Day-3/src/styles.css

+/* You can add global styles to this file, and also import other style files */
+html{
+    background-image: linear-gradient(rgba(255,255,255,0.75),rgba(255,255,255,0.75)), url("data:image/png;base64,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");
+    background-size: cover;
+}
+button{
+    font-size:20px;
+    color:white;
+    background-color: black;
+    margin-right: 5px;
+}
+
+button:hover{
+    color:white;
+    background-color: red;
+}
+button:active{
+    color:white;
+    background-color: green;
+}
\ No newline at end of file

Day-3/src/test.ts

+// This file is required by karma.conf.js and loads recursively all the .spec and framework files
+
+import 'zone.js/dist/zone-testing';
+import { getTestBed } from '@angular/core/testing';
+import {
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting
+} from '@angular/platform-browser-dynamic/testing';
+
+declare const require: {
+  context(path: string, deep?: boolean, filter?: RegExp): {
+    keys(): string[];
+    <T>(id: string): T;
+  };
+};
+
+// First, initialize the Angular testing environment.
+getTestBed().initTestEnvironment(
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting()
+);
+// Then we find all the tests.
+const context = require.context('./', true, /\.spec\.ts$/);
+// And load the modules.
+context.keys().map(context);

Day-4/src/app/app-routing.module.ts

+import { Component, NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+import {LoginComponent }from './login/login.component';
+import {RegisterComponent }from './register/register.component';
+
+const routes: Routes = [
+  {path:'login',component:LoginComponent},
+  {path:'register',component:RegisterComponent}
+];
+
+@NgModule({
+  imports: [RouterModule.forRoot(routes)],
+  exports: [RouterModule]
+})
+export class AppRoutingModule { }
+export const routingComponents=[LoginComponent,RegisterComponent]

Day-4/src/app/app.component.css

+html{
+    background-image: linear-gradient(rgba(255,255,255,0.75),rgba(255,255,255,0.75)), url("https://th.bing.com/th/id/OIP.vzAZLfoj6SJem3J09RD8twHaEK?w=279&h=180&c=7&o=5&pid=1.7");
+    background-size: cover;
+}
+
+

Day-4/src/app/app.component.html

+
+
+<section id="home">
+  <div class="section-inner">
+    <h1>Welcome to Medicover Hospital </h1>
+    <img src="data:image/png;base64,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" class="profile-img">
+    <br>
+    <button routerLink="/login" routerLinkActive="active">Login</button>
+    <button routerLink="/register" routerLinkActive="active">Register</button>
+  
+  <router-outlet></router-outlet>
+  </div>
+</section>

Day-4/src/app/app.component.spec.ts

+import { TestBed } from '@angular/core/testing';
+import { RouterTestingModule } from '@angular/router/testing';
+import { AppComponent } from './app.component';
+
+describe('AppComponent', () => {
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [
+        RouterTestingModule
+      ],
+      declarations: [
+        AppComponent
+      ],
+    }).compileComponents();
+  });
+
+  it('should create the app', () => {
+    const fixture = TestBed.createComponent(AppComponent);
+    const app = fixture.componentInstance;
+    expect(app).toBeTruthy();
+  });
+
+  it(`should have as title 'fourth-angularjs'`, () => {
+    const fixture = TestBed.createComponent(AppComponent);
+    const app = fixture.componentInstance;
+    expect(app.title).toEqual('fourth-angularjs');
+  });
+
+  it('should render title', () => {
+    const fixture = TestBed.createComponent(AppComponent);
+    fixture.detectChanges();
+    const compiled = fixture.nativeElement;
+    expect(compiled.querySelector('.content span').textContent).toContain('fourth-angularjs app is running!');
+  });
+});

Day-4/src/app/app.component.ts

+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-root',
+  templateUrl: './app.component.html',
+  styleUrls: ['./app.component.css']
+})
+export class AppComponent {
+  title = 'fourth-angularjs';
+  
+
+}

Day-4/src/app/app.module.ts

+import { BrowserModule } from '@angular/platform-browser';
+import { NgModule } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { ReactiveFormsModule } from '@angular/forms';
+import { AppRoutingModule,routingComponents } from './app-routing.module';
+import { AppComponent } from './app.component';
+
+
+
+
+@NgModule({
+  declarations: [
+    AppComponent,
+    routingComponents
+  
+  ],
+  imports: [
+    BrowserModule,
+    FormsModule,
+    ReactiveFormsModule,
+    AppRoutingModule
+  ],
+  providers: [],
+  bootstrap: [AppComponent]
+})
+export class AppModule { }

Day-4/src/app/login/login.component.css

+input.ng-invalid.ng-touched{
+    border-color: red;
+}
\ No newline at end of file

Day-4/src/app/login/login.component.html

+<!-- Reactive Form -->
+
+<h3>Login Yourself.... </h3>
+<form [formGroup]="form" (ngSubmit)="submitForm()">
+   <p> <label>UserName :</label>
+    <input type="text" [formControlName]="'username'" placeholder="Enter your username"/>
+  </p>
+  
+    <br>
+    <label>Password :</label>
+    <input type="password" [formControlName]="'password'" placeholder="Enter your password"/>
+    <input type = "submit" value = "Login" [disabled]="!form.valid">
+  </form>
\ No newline at end of file

Day-4/src/app/login/login.component.spec.ts

+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { LoginComponent } from './login.component';
+
+describe('LoginComponent', () => {
+  let component: LoginComponent;
+  let fixture: ComponentFixture<LoginComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ LoginComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(LoginComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

Day-4/src/app/login/login.component.ts

+import { Component, OnInit } from '@angular/core';
+import { FormGroup, FormControl,FormBuilder, Validators } from '@angular/forms';
+@Component({
+  selector: 'app-login',
+  templateUrl: './login.component.html',
+  styleUrls: ['./login.component.css']
+})
+export class LoginComponent implements OnInit {
+  form: FormGroup;
+  constructor(private readonly fb: FormBuilder) {
+    this.form = this.fb.group({
+      username: ['',Validators.required],      
+      password: ['',Validators.required],
+     });
+  }
+    
+  submitForm() {
+    console.log(this.form.getRawValue());
+    alert("You have logged in successfully")
+  }
+
+
+  ngOnInit(): void {
+  }
+
+}

Day-4/src/app/register/register.component.css

+
+ 
+ input[type='radio']{
+     width: 50px;
+     height: 18px;
+     align-items: left;
+     display: inline-block;
+ }
+ input[type='checkbox']
+ {
+    width: 50px;
+    height: 20px;
+    align-items: left;
+    display: inline-block;
+ }
+

Day-4/src/app/register/register.component.html

+<!-- Template driven form -->
+
+<h3>Please register yourself here.....</h3>
+
+<form #hospital = "ngForm" (ngSubmit) = "onSubmit(hospital)" >
+    <label>Name :</label>
+    <input  type = "text" name = "patient_name" placeholder = "Enter full name" pattern="^[a-zA-Z]+$"  required ngModel #patient_name="ngModel">
+    <span class="help-bpx" *ngIf="patient_name.touched  && !patient_name.valid">Please enter the valid Name (Only Alphabets)</span>
+    <br/>
+    <label>Age :</label>
+    <input type = "text" name = "patient_age" placeholder = "Enter age"  required  ngModel #age="ngModel" >
+    <span class="help-bpx" *ngIf="age.touched ">Please enter the Age</span>
+    <br/>
+    <label >Email :</label>
+    <input type="email"  name="email"  placeholder = "Enter email" email required ngModel #email="ngModel">
+    <span class="help-bpx" *ngIf="email.touched && !email.valid">Please enter the valid Email</span>
+    
+    <br>
+    <label>Phone Number :</label>
+    <input type = "tel" name = "mobile" placeholder = "Enter Phone Number" maxlength="10" required ngModel #tel="ngModel">
+    <span class="help-bpx" *ngIf="tel.touched && !tel.valid  ">Please enter the valid Phone Number</span>
+    <br/>
+    <label >Gender :
+    <input type="radio" value="male"  name="gender"> Male
+    <input type="radio" value="female"  name="gender"> Female
+    <input type="radio" value="other"  name="gender"> Other</label>
+    <br>
+    <label >Did you concern any doctor before??  
+    <input type="checkbox" name="doctor"   ngModel></label>
+    <br>
+    <label >Specialists :
+    <select name="Specialists" ngModel>
+      <option selected="" value=""></option>
+      <option [ngValue]="c.id" *ngFor="let c of specialistsList">
+        {{c.name}}
+      </option>
+    </select> </label>
+    <br>
+    <input type = "submit" value = "Register" [disabled]="!hospital.valid">
+  </form>

Day-4/src/app/register/register.component.spec.ts

+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { RegisterComponent } from './register.component';
+
+describe('RegisterComponent', () => {
+  let component: RegisterComponent;
+  let fixture: ComponentFixture<RegisterComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ RegisterComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(RegisterComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

Day-4/src/app/register/register.component.ts

+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-register',
+  templateUrl: './register.component.html',
+  styleUrls: ['./register.component.css']
+})
+export class RegisterComponent  {
+
+  
+
+  onSubmit(hospital:any) {
+    console.log(hospital.value);
+    alert("Patient is registered successfully");
+  }
+ 
+    
+ specialistsList:Specialists[] = [
+  new Specialists("1", "Audiologist"),
+  new Specialists('2', 'Cardiologist'),
+  new Specialists('3', 'Dermatologist'),
+  new Specialists('4', 'Gynecologist'),
+  new Specialists('5', 'Neurologist'),
+  new Specialists('6', 'Orthopedic Surgeon')
+];
+}
+export class Specialists {
+id:string;
+name:string;
+
+constructor(id:string, name:string) {
+  this.id=id;
+  this.name=name;
+}
+
+ 
+
+}
+

Day-4/src/environments/environment.prod.ts

+export const environment = {
+  production: true
+};

Day-4/src/environments/environment.ts

+// This file can be replaced during build by using the `fileReplacements` array.
+// `ng build --prod` replaces `environment.ts` with `environment.prod.ts`.
+// The list of file replacements can be found in `angular.json`.
+
+export const environment = {
+  production: false
+};
+
+/*
+ * For easier debugging in development mode, you can import the following file
+ * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`.
+ *
+ * This import should be commented out in production mode because it will have a negative impact
+ * on performance if an error is thrown.
+ */
+// import 'zone.js/dist/zone-error';  // Included with Angular CLI.

Day-4/src/index.html

+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>FourthAngularjs</title>
+  <base href="/">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="icon" type="image/x-icon" href="favicon.ico">
+</head>
+<body>
+  <app-root></app-root>
+</body>
+</html>

Day-4/src/main.ts

+import { enableProdMode } from '@angular/core';
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+
+import { AppModule } from './app/app.module';
+import { environment } from './environments/environment';
+
+if (environment.production) {
+  enableProdMode();
+}
+
+platformBrowserDynamic().bootstrapModule(AppModule)
+  .catch(err => console.error(err));

Day-4/src/polyfills.ts

+/**
+ * This file includes polyfills needed by Angular and is loaded before the app.
+ * You can add your own extra polyfills to this file.
+ *
+ * This file is divided into 2 sections:
+ *   1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
+ *   2. Application imports. Files imported after ZoneJS that should be loaded before your main
+ *      file.
+ *
+ * The current setup is for so-called "evergreen" browsers; the last versions of browsers that
+ * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera),
+ * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile.
+ *
+ * Learn more in https://angular.io/guide/browser-support
+ */
+
+/***************************************************************************************************
+ * BROWSER POLYFILLS
+ */
+
+/** IE11 requires the following for NgClass support on SVG elements */
+// import 'classlist.js';  // Run `npm install --save classlist.js`.
+
+/**
+ * Web Animations `@angular/platform-browser/animations`
+ * Only required if AnimationBuilder is used within the application and using IE/Edge or Safari.
+ * Standard animation support in Angular DOES NOT require any polyfills (as of Angular 6.0).
+ */
+// import 'web-animations-js';  // Run `npm install --save web-animations-js`.
+
+/**
+ * By default, zone.js will patch all possible macroTask and DomEvents
+ * user can disable parts of macroTask/DomEvents patch by setting following flags
+ * because those flags need to be set before `zone.js` being loaded, and webpack
+ * will put import in the top of bundle, so user need to create a separate file
+ * in this directory (for example: zone-flags.ts), and put the following flags
+ * into that file, and then add the following code before importing zone.js.
+ * import './zone-flags';
+ *
+ * The flags allowed in zone-flags.ts are listed here.
+ *
+ * The following flags will work for all browsers.
+ *
+ * (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame
+ * (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick
+ * (window as any).__zone_symbol__UNPATCHED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames
+ *
+ *  in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js
+ *  with the following flag, it will bypass `zone.js` patch for IE/Edge
+ *
+ *  (window as any).__Zone_enable_cross_context_check = true;
+ *
+ */
+
+/***************************************************************************************************
+ * Zone JS is required by default for Angular itself.
+ */
+import 'zone.js/dist/zone';  // Included with Angular CLI.
+
+
+/***************************************************************************************************
+ * APPLICATION IMPORTS
+ */

Day-4/src/styles.css

+/* You can add global styles to this file, and also import other style files */
+
+section {
+    height: 300vh;
+    border: 1px solid black;
+    display: flex;
+    justify-content: center;
+    
+    text-align: center;
+    
+    background-size: cover; 
+    background-position: center center; 
+    background-repeat: no-repeat; 
+    background-attachment: fixed; 
+}
+#home .profile-img {
+    width: 300px;
+    border-radius: 50%;
+}
+#home {
+    background-image: linear-gradient(rgba(255,255,255,0.75),rgba(255,255,255,0.75)), url('https://th.bing.com/th/id/OIP.vzAZLfoj6SJem3J09RD8twHaEK?w=279&h=180&c=7&o=5&pid=1.7');
+}
+#home h1{
+    font-size: 70px;
+    font-family: Georgia, 'Times New Roman', Times, serif;
+    font-style: italic;
+
+}
+#home button{
+    margin:30px 10px 0 10px;
+    color:white;
+    background-color: black;
+    padding:10px;
+    font-size: 25px;
+}
+#home button:hover{
+    background-color: red;
+}
+#home .active{
+    background-color: green;
+}
+h3{
+    padding: 5px;
+    font-size: 35px;
+}
+form {
+    width: 80%;
+    margin:10px auto;
+  }
+  label,
+  input {
+    /* In order to define widths */
+    display: block;
+  }
+  
+  label {
+    /* Positions the label text beside the input */
+    text-align: left;
+    font-size: 22px;
+    
+  }
+  input{
+      height: 30px;
+      width:100%
+  }
+  input[type='submit']{
+    font-size: 22px;
+    height: 40px;
+    padding:5px;
+    margin-top: 2%;
+    color: white;
+    background-color: black;
+ }
+ input[type='submit']:hover{
+     background-color: red;
+ }
+ input[type='submit']:disabled{
+     background-color: royalblue;
+ }
+ input.ng-invalid.ng-touched{
+    border-color: red;
+}
\ No newline at end of file

Day-4/src/test.ts

+// This file is required by karma.conf.js and loads recursively all the .spec and framework files
+
+import 'zone.js/dist/zone-testing';
+import { getTestBed } from '@angular/core/testing';
+import {
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting
+} from '@angular/platform-browser-dynamic/testing';
+
+declare const require: {
+  context(path: string, deep?: boolean, filter?: RegExp): {
+    keys(): string[];
+    <T>(id: string): T;
+  };
+};
+
+// First, initialize the Angular testing environment.
+getTestBed().initTestEnvironment(
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting()
+);
+// Then we find all the tests.
+const context = require.context('./', true, /\.spec\.ts$/);
+// And load the modules.
+context.keys().map(context);