fin sesion 1

package.json

 {
 {
-  "name": "base",
+    "name": "01-hola-mundo",
     "version": "0.0.0",
     "version": "0.0.0",
     "scripts": {
     "scripts": {
         "ng": "ng",
         "ng": "ng",

src/app/app.component.ts

@@ -6,5 +6,9 @@ import { Component } from '@angular/core';
   styleUrls: ['./app.component.css']
   styleUrls: ['./app.component.css']
 })
 })
 export class AppComponent {
 export class AppComponent {
-  title = 'base';
+  title = 'Angular ';
+  otro = 'aaaa';
+
+  nombre = 'Adrian';
+  apellido = 'Borella';
 }
 }

src/app/app.module.ts

@@ -2,10 +2,16 @@ import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
 import { NgModule } from '@angular/core';
 
 
 import { AppComponent } from './app.component';
 import { AppComponent } from './app.component';
+import { HeaderComponent } from './components/header/header.component'
+import { BodyComponent } from './components/body/body.component';
+import { FooterComponent } from './components/footer/footer.component';
 
 
 @NgModule({
 @NgModule({
   declarations: [
   declarations: [
-    AppComponent
+    AppComponent,
+    HeaderComponent,
+    BodyComponent,
+    FooterComponent
   ],
   ],
   imports: [
   imports: [
     BrowserModule
     BrowserModule

src/app/components/body/body.component.html

+<div class='container m-4'>
+    <div class="row">
+        <div class="col">
+            <h1>ngIf</h1>
+            <button class="btn btn-primary btn-block" (click)="mostrarOcular()">
+                Mostrar / Ocultar
+            </button>
+            <div *ngIf="mostrarTarjeta" class="card border-secondary mb-5" style="width: 100%;">
+                <div class="card-body">
+                    <h4 class="card-title">{{ frase.autor }}</h4>
+                    <p class="card-text">{{ frase.mensaje }}</p>
+                </div>
+            </div>
+        </div>
+        <div class="col">
+            <h1>ngFor</h1>
+            <ul class="list-group">
+                <li *ngFor="let item of personas; let i = index" class="list-group-item d-flex justify-content-between align-items-center">
+                    {{ i +1 }} - {{ item }}
+                </li>
+            </ul>
+        </div>
+    </div>
+</div>
\ No newline at end of file

src/app/components/body/body.component.ts

+import { Component } from '@angular/core';
+
+@Component({
+    selector: 'app-body',
+    templateUrl: './body.component.html'
+})
+export class BodyComponent {
+    frase: any = {
+        mensaje: 'Un gran poder requiere una gran responsabilidad',
+        autor: 'Ben Parker'
+    };
+
+    mostrarTarjeta: boolean;
+
+    personas: string[];
+
+    constructor() {
+        this.mostrarTarjeta = true;
+        this.personas = ['Adrian Borella', 'Noelia Cordoba', 'Juan Pablo Dure']
+    }
+
+    mostrarOcular() {
+        this.mostrarTarjeta = !this.mostrarTarjeta;
+    }
+}

src/app/components/footer/footer.component.html

+<footer class='footer bg-dark text-center'>
+    <div class="container m-2">
+        <p>&copy; Adrian Borella {{ year }}</p>
+    </div>
+</footer>
\ No newline at end of file

src/app/components/footer/footer.component.spec.ts

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

src/app/components/footer/footer.component.ts

+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-footer',
+  templateUrl: './footer.component.html',
+  styleUrls: ['./footer.component.css']
+})
+export class FooterComponent implements OnInit {
+  year: number;
+
+  constructor() {
+    this.year = new Date().getFullYear();
+  }
+
+  ngOnInit() {
+  }
+
+}

src/app/components/header/header.component.html

+<nav class="navbar navbar-expand-lg navbar-light bg-light">
+    <a class="navbar-brand" href="#">Navbar</a>
+    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
+          <span class="navbar-toggler-icon"></span>
+        </button>
+
+    <div class="collapse navbar-collapse" id="navbarSupportedContent">
+        <ul class="navbar-nav mr-auto">
+            <li class="nav-item active">
+                <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
+            </li>
+            <li class="nav-item">
+                <a class="nav-link" href="#">Link</a>
+            </li>
+        </ul>
+        <form class="form-inline my-2 my-lg-0">
+            <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
+            <button class="btn btn-success my-2 my-sm-0" type="submit">Search</button>
+        </form>
+    </div>
+</nav>
\ No newline at end of file

src/app/components/header/header.component.ts

+import { Component } from '@angular/core';
+
+@Component({
+    selector: 'app-header',
+    templateUrl: './header.component.html'
+})
+export class HeaderComponent { }
\ No newline at end of file

src/index.html

 <!doctype html>
 <!doctype html>
 <html lang="en">
 <html lang="en">
+
 <head>
 <head>
     <meta charset="utf-8">
     <meta charset="utf-8">
     <title>Base</title>
     <title>Base</title>
     <base href="/">
     <base href="/">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="icon" type="image/x-icon" href="favicon.ico">
     <link rel="icon" type="image/x-icon" href="favicon.ico">
+    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
+    <link rel="stylesheet" href="./assets/css/bootstrap.css">
 </head>
 </head>
+
 <body>
 <body>
     <app-root></app-root>
     <app-root></app-root>
 </body>
 </body>
+
 </html>
 </html>
\ No newline at end of file

src/styles.css

 /* You can add global styles to this file, and also import other style files */
 /* You can add global styles to this file, and also import other style files */
+
+.footer {
+    color: white;
+    position: fixed;
+    bottom: 0px;
+    width: 100%;
+}
\ No newline at end of file