Ejercicio 1 Directivas

Home page.html

<ion-header [translucent]="true">
<ion-toolbar>
<ion-title>
Directivas
</ion-title>
</ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true">
<ion-header collapse="condense">
<ion-toolbar>
<ion-title size="large">Blank</ion-title>
</ion-toolbar>
</ion-header>

<ion-card *ngFor="let item of items">

<ion-card-header>
<ion-card-subtitle>
{{item.titulo}}
</ion-card-subtitle>
<ion-card-title>
{{item.descripcion}}
</ion-card-title>
</ion-card-header>
</ion-card>

</ion-content>

Home page.ts

import { Component } from '@angular/core';

@Component({
selector: 'app-home',
templateUrl: 'home.page.html',
styleUrls: ['home.page.scss'],
})
export class HomePage {

items=[

{titulo:'Ingeniero', descripcion:'Electronico'},
{titulo:'Medico', descripcion:'Cirujano'},
{titulo:'Abogado', descripcion:'Penalista'},
];
 constructor() {}

Ejercicio2 - Html

<ion-header [translucent]="true">
<ion-toolbar>
<ion-title>
Directivas
</ion-title>
</ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true">
<ion-header collapse="condense">
<ion-toolbar>
<ion-title size="large">Blank</ion-title>
</ion-toolbar>
</ion-header>

<div *ngIf="mostrar; else elseBlock">

<ion-card *ngFor="let item of items">
<ion-card-header>
<ion-card-subtitle>
{{item.titulo}}
</ion-card-subtitle>
<ion-card-title>
{{item.descripcion}}
</ion-card-title>
</ion-card-header>
</ion-card>
</div>
<ng-template #elseBlock>

<ion-card>
<ion-card-header>
<ion-card-title>No hay Registros!</ion-card-title>
</ion-card-header>
</ion-card>
</ng-template>

<ion-card-header>
<div [ngSwitch]="estado">
<p *ngSwitchCase="Ingeniero">El estado es Ingeniero</p>
<p *ngSwitchCase="Medico">El estado es Medico</p>
 <p *ngSwitchCase="Abogado">El estado es Abogado</p>
<p *ngSwitchDefault>No es ningún estado conocido</p>
</div>
</ion-card-header>

</ion-content>

Home page.ts

import { Component } from '@angular/core';

@Component({
selector: 'app-home',
templateUrl: 'home.page.html',
styleUrls: ['home.page.scss'],
})
export class HomePage {

Mostrar:boolean;
mostrar=false;

items=[

{titulo:'Ingeniero', descripcion:'Electronico'},
{titulo:'Medico', descripcion:'Cirujano'},
{titulo:'Abogado', descripcion:'Penalista'},
];

constructor() {}

Ejercicio 3 Home.page.html

<ion-header [translucent]="true">
<ion-toolbar>
<ion-title>
Directivas
</ion-title>
</ion-toolbar>
</ion-header>

<ion-content hide-menu>
<ion-header collapse="condense">
<ion-toolbar>
<ion-title size="large">Directivas</ion-title>
 </ion-toolbar>
</ion-header>

<ion-toolbar no-border-top class='show-header'>

<ion-segment color='secondary' [(ngModel)]="section">
<ion-segment-button value="portada">
Portada
</ion-segment-button>
<ion-segment-button value="nuevas" >
Nuevas
</ion-segment-button>
<ion-segment-button value="populares">
Populares
</ion-segment-button>
<ion-segment-button value="mas_visitadas">
+ Visitadas
</ion-segment-button>
</ion-segment>
</ion-toolbar>

<ion-list>
<ion-button ion-item *ngFor="let item of items"
(click)="itemSelected(item)">
{{ item }}
</ion-button>
</ion-list>

</ion-content>

Home page.ts

import { Component } from '@angular/core';

import { NavController } from '@ionic/angular';

@Component({
selector: 'app-home',
templateUrl: 'home.page.html',
styleUrls: ['home.page.scss'],
})

export class HomePage {

items = [
'Pokemon Yellow',
'Super Metroid',
'Mega Man X',
'The Legend of Zelda',
 'Pac-Man',
'Super Mario World',
'Street Fighter II',
'Half Life',
'Final Fantasy VII',

];

constructor(public navCtrl: NavController) {

App module.ts

import { NgModule } from '@angular/core';

import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';

import { IonicModule, IonicRouteStrategy } from '@ionic/angular';

import { AppComponent } from './app.component';

import { AppRoutingModule } from './app-routing.module';
import { HideMenuDirective } from './hide-menu.directive';

@NgModule({
declarations: [
AppComponent,
HideMenuDirective,
],
imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule],
providers: [{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy
}],
bootstrap: [AppComponent],
})
export class AppModule {}

Home.page.cscs

#home.page.html{
ion-toolbar {
position:fixed;
}

.hide-header{
top: 0px;
 }

.show-header{
top: 56px;
}
}

Ejecutamos el siguiente comando…

ionic g directive hide-menu

Luego en hide.menu.directiva.ts

import { Directive, ElementRef, Renderer2 } from '@angular/core';

@Directive({
selector: '[hide-menu]',
host: {
'(ionScroll)': 'handleScroll($event)'
}
})
export class HideMenuDirective {

private toolBarRef:any;
private storedScroll: number = 0;
private threshold: number = 10;

constructor(public element:ElementRef,
public renderer:Renderer2) {}

ngOnInit(){
//Con esto conseguimos referenciar la barra de navegacion mediante
su clase.
this.toolBarRef =
this.element.nativeElement.getElementsByClassName("toolbar")[0];

handleScroll(event) {
if (event.scrollTop - this.storedScroll > this.threshold) {
//al hacer scroll down hace desaparecer la barra mediante clases
this.renderer.addClass(this.toolBarRef,'hide-header');
this.renderer.removeClass(this.toolBarRef,'show-header');
} else if (event.scrollTop - this.storedScroll < 0) {
//al hacer scroll up la hace aparecer de nuevo
this.renderer.removeClass(this.toolBarRef,'hide-header');
}
//actualizmos la ultima posicion conocida del scroll proveniente
del evento
 this.storedScroll = event.scrollTop;
}
}