exercises

angular/angular1.md

@@ -0,0 +1,212 @@
+### :camel: Angular examples
+---
+
+#### Task1: Create a component to display Hello World
+
+```
+
+ng generate component helloworld
+
+app-routing.module.ts
+
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+import { HelloworldComponent } from './helloworld/helloworld.component';
+
+const routes: Routes = [
+  { path: 'hello', component: HelloworldComponent }
+];
+
+@NgModule({
+  imports: [RouterModule.forRoot(routes)],
+  exports: [RouterModule]
+})
+export class AppRoutingModule { }
+
+app.component.html
+<router-outlet></router-outlet>
+
+
+
+```
+
+#### Task2: Create angular component calculator
+
+![Screenshot](cal.png)
+
+```
+app.module.ts
+import { BrowserModule } from '@angular/platform-browser';
+import { NgModule } from '@angular/core';
+
+import { AppComponent } from './app.component';
+import { CalcComponent } from './calc/calc.component'
+import { FormsModule } from '@angular/forms';
+
+@NgModule({
+  declarations: [
+    AppComponent,
+    CalcComponent
+  ],
+  imports: [
+    BrowserModule,
+    FormsModule
+  ],
+  providers: [],
+  bootstrap: [AppComponent]
+})
+export class AppModule { }
+
+app.component.ts 
+
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-root',
+  templateUrl: './app.component.html',
+  styleUrls: ['./app.component.css']
+})
+export class AppComponent {
+  title = 'app';
+}
+
+app.component.html
+<!--The content below is only a placeholder and can be replaced.-->
+<div style="text-align:center">
+  <calc></calc>
+</div>
+
+calc.component.html
+<div class="container">
+	<div class="header">
+		<h2>
+			Calculator component
+		</h2>	
+	</div>
+
+	<div class="grid">
+		<div class="row">
+			<div class="col-6">
+				<div class="operation">
+					<div class="row">
+						<div class="col-12">
+							<input [(ngModel)]="number1" type="number" name="" placeholder="number">
+						</div>
+					</div>
+					<div class="row">
+						<div class="col-12">
+							<input [(ngModel)]="number2" type="number" name="" placeholder="number">
+						</div>
+					</div>
+					<div>
+						<div class="col-12">
+							<button (click)="add()" class="button">
+								Add 
+							</button>
+						</div>
+					</div>
+				</div>
+			</div>
+			<div class="col-6">
+				<div class="result">
+					<span>
+						Result : {{result}}
+					</span>
+				</div>
+			</div>
+		</div>
+	</div>
+</div>
+
+calc.component.ts 
+
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'calc',
+  templateUrl: 'calc.component.html',
+  styleUrls: ['calc.component.css']
+})
+export class CalcComponent {
+  public number1 : number;
+  public number2 : number;
+  public result : number;
+
+  public add(){
+  	this.result = this.number1 + this.number2
+  }
+}
+```
+
+#### Task3: Create a component to display the heros list as shown below
+
+![Screenshot](heros-list.png)
+
+```
+
+useful commands
+
+ng new angular-hero-app
+
+ng g c heroes
+ng g c hero-detail
+ng g c messages
+
+npm i ng2-search-filter --save
+
+```
+
+
+#### Task4: Create a component to handle the messages
+
+![Screenshot](messages.png)
+
+```
+
+useful commands
+
+ng new angular-hero-app
+
+ng g c heroes
+ng g c hero-detail
+ng g c messages
+
+npm i ng2-search-filter --save
+
+```
+
+#### Task5: Create a component to handle the hero details
+
+![Screenshot](hero-detail.png)
+
+```
+
+useful commands
+
+ng new angular-hero-app
+
+ng g c heroes
+ng g c hero-detail
+ng g c messages
+
+npm i ng2-search-filter --save
+
+```
+
+#### Task5: Create a component to handle the delete
+
+![Screenshot](hero-delete.png)
+
+```
+
+useful commands
+
+ng new angular-hero-app
+
+ng g c heroes
+ng g c hero-detail
+ng g c messages
+
+npm i ng2-search-filter --save
+
+```

angular/calc.component.css

@@ -0,0 +1,101 @@
+.grid{
+	width: 100%
+}
+
+.row{
+	width: 100%;
+	display: flex;
+}
+
+
+.col-1 {
+    width: 8.33%;
+}
+
+.col-2 {
+    width: 16.66%;
+}
+
+.col-3 {
+    width: 25%;
+}
+
+.col-4 {
+    width: 33.33%;
+}
+
+.col-5 {
+    width: 41.66%;
+}
+
+.col-6 {
+    width: 50%;
+}
+
+.col-7 {
+    width: 58.33%;
+}
+
+.col-8 {
+    width: 66.66%;
+}
+
+.col-9 {
+    width: 75%;
+}
+
+.col-10 {
+    width: 83.33%;
+}
+
+.col-11 {
+    width: 91.66%;
+}
+
+.col-12 {
+    width: 100%;
+}
+
+.header{
+	width: 100%;
+	background-color: #003A60;
+	height: 100px;
+}
+
+.header h2{
+	line-height: 100px;
+	color: #fff;
+}
+
+.button {
+    background-color: #4CAF50; /* Green */
+    border: none;
+    color: white;
+    padding: 15px 32px;
+    text-align: center;
+    text-decoration: none;
+    display: inline-block;
+    font-size: 16px;
+    margin: 4px 2px;
+    cursor: pointer;
+}
+
+input{
+	border: none;
+	border-bottom: 1px solid grey;
+	width: 80%;
+	margin: 0% 10%;
+	padding: 5%;
+}
+
+.result{
+	background-color: #ddffff;
+	width: 80%;
+	margin: 20px 10px 10px 10px;
+	height: 100px;
+	border-left: 3px solid #2196F3;
+}
+
+.result span{
+	line-height: 100px;
+}