add

Author: mr-dev-dragon

a/src/app/mychild/components/alert/alert.component.css

@@ -0,0 +1,18 @@
+@import url("https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css");
+
+.alert-primary
+{
+    background-color: #e61a57dc;
+    color: #fff;
+
+
+}
+.alert-success {
+    background-color: #3dbb0bb4;
+    color: #fff;
+}
+.alert-warning
+{
+    background-color: #f1b708de;
+    color: #fff;
+}

a/src/app/mychild/components/alert/alert.component.html

@@ -0,0 +1,36 @@
+
+
+
+
+
+<br>
+<div class="container text-center ">
+
+  <div id="refreshDivID">
+    <div class="reloaded-divs">
+      <div class="alert alert-primary alert-dismissible fade show" role="alert">
+        <strong>Holy guacamole!</strong> You should
+        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
+          <span aria-hidden="true">&times;</span>
+        </button>
+      </div>
+      <div class="alert alert-warning alert-dismissible fade show" role="alert">
+        <strong>Holy guacamole!</strong> You should check in
+        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
+          <span aria-hidden="true">&times;</span>
+        </button>
+      </div>
+      <div class="alert alert-success alert-dismissible fade show" role="alert">
+        <strong>Holy guacamole!</strong> You should
+        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
+          <span aria-hidden="true">&times;</span>
+        </button>
+      </div>
+
+    </div>
+  </div>
+</div>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
+
+

a/src/app/mychild/components/alert/alert.component.spec.ts

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

a/src/app/mychild/components/alert/alert.component.ts

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

a/src/app/mychild/components/child/child.component.css

@@ -1,10 +1,34 @@
-.app-child
+.app-childd
 {
     background-color: #1aace6;
     padding: 50px;
     margin: auto;
+    padding-bottom: 0px;
     height: 40vh;
-    margin-top: 33vh;
     border-radius: 15px;
     border: 3px solid #fff;
 }
+.max{
+  max-width: 500px !important;
+  display: flex;
+  margin-right: -120px;
+  margin-top: -50px;
+}
+* {
+  box-sizing: border-box;
+}
+
+/* Create two equal columns that floats next to each other */
+.col {
+  float: left;
+  width: 50%;
+  padding: 10px;
+  height: 300px; /* Should be removed. Only for demonstration */
+}
+
+/* Clear floats after the columns */
+.row:after {
+  content: "";
+  display: table;
+  clear: both;
+}

a/src/app/mychild/components/child/child.component.html

@@ -1,4 +1,11 @@
-<section class="app-child ">
+<section class="app-childd   ">
+  <div class="row ">
+<div class="col"></div>
+<div class="max col">
+  <app-alert></app-alert>
+</div>
+  </div>
+
 
 
 </section>

a/src/app/mychild/components/from/from.component.css

@@ -0,0 +1,11 @@
+
+
+
+<form (ngSubmit)="onSubmit()" #form="ngForm">
+
+    <input type="text" [(ngModel)]="name" />
+    <input type="url" [(ngModel)]="url" />
+    <textarea [(ngModel)]="text"></textarea>
+    <button (click)="onClick()">Submit</button>
+    
+</form>

a/src/app/mychild/components/from/from.component.html

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

a/src/app/mychild/components/from/from.component.spec.ts

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