<div style="height: 80vh;">
<mat-toolbarcolor="primary">
<mat-toolbar-row>
<buttonmat-icon-button(click)="sidenav.toggle()"fxShow="true"fxHide.gt-sm>
<mat-icon>menu</mat-icon>
</button>
<span>Responsive Navigation</span>
<spanclass="menu-spacer"></span>
<divfxShow="true"fxHide.lt-md>
<!-- The following menu items will be hidden on both SM and XS screen sizes -->
<ahref="#"mat-button>Menu Item 1</a>
<ahref="#"mat-button>Menu Item 2</a>
<ahref="#"mat-button>Menu Item 3</a>
<ahref="#"mat-button>Menu Item 4</a>
<ahref="#"mat-button>Menu Item 5</a>
<ahref="#"mat-button>Menu Item 6</a>
</div>
</mat-toolbar-row>
</mat-toolbar>
<mat-sidenav-containerfxFlexFill>
<mat-sidenav#sidenav>
<mat-nav-list>
<a(click)="sidenav.toggle()"href=""mat-list-item>Close</a>
<ahref="#"mat-list-item>Menu Item 1</a>
<ahref="#"mat-list-item>Menu Item 2</a>
<ahref="#"mat-list-item>Menu Item 3</a>
<ahref="#"mat-list-item>Menu Item 4</a>
<ahref="#"mat-list-item>Menu Item 5</a>
<ahref="#"mat-list-item>Menu Item 6</a>
</mat-nav-list>
</mat-sidenav>
<mat-sidenav-contentfxFlexFill>Main content</mat-sidenav-content>
</mat-sidenav-container>
</div>
<div style="height: 80vh;">
<mat-toolbarcolor="primary">
<mat-toolbar-row>
<buttonmat-icon-button(click)="sidenav.toggle()"fxShow="true"fxHide.gt-sm>
<mat-icon>menu</mat-icon>
</button>
<span>Responsive Navigation</span>
<spanclass="menu-spacer"></span>
<divfxShow="true"fxHide.lt-md>
<!-- The following menu items will be hidden on both SM and XS screen sizes -->
<ahref="#"mat-button>Menu Item 1</a>
<ahref="#"mat-button>Menu Item 2</a>
<ahref="#"mat-button>Menu Item 3</a>
<ahref="#"mat-button>Menu Item 4</a>
<ahref="#"mat-button>Menu Item 5</a>
<ahref="#"mat-button>Menu Item 6</a>
</div>
</mat-toolbar-row>
</mat-toolbar>
<mat-sidenav-containerfxFlexFill>
<mat-sidenav#sidenav>
<mat-nav-list>
<a(click)="sidenav.toggle()"href=""mat-list-item>Close</a>
<ahref="#"mat-list-item>Menu Item 1</a>
<ahref="#"mat-list-item>Menu Item 2</a>
<ahref="#"mat-list-item>Menu Item 3</a>
<ahref="#"mat-list-item>Menu Item 4</a>
<ahref="#"mat-list-item>Menu Item 5</a>
<ahref="#"mat-list-item>Menu Item 6</a>
</mat-nav-list>
</mat-sidenav>
<mat-sidenav-contentfxFlexFill>Main content</mat-sidenav-content>
</mat-sidenav-container>
</div>
Ajouter Katex lecteur latex
npm install ng-katex --save
To add the module to your proyect add the KatexModule to import's field of your parent module:
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { KatexModule } from 'ng-katex';
import { AppComponent } from './app/app.component';
@NgModule({
imports: [
BrowserModule,
KatexModule
],
declarations: [AppComponent],
bootstrap: [AppComponent]
})
Mettre dans theme\variable.scss
@import '~katex/dist/katex.css';
http://yallouz.arie.free.fr/sti2dtex/listexos.php
latex ionic
https://www.quora.com/How-do-I-use-Mathjax-in-Ionic-application
Installer Document Viewer pour pdf
https://ionicacademy.com/pdf-files-ionic/
# Cordova Plugins
ionic cordova plugin add cordova-plugin-file
ionic cordova plugin add cordova-plugin-file-transfer
ionic cordova plugin add cordova-plugin-document-viewer
# Ionic Native packages
npm install --save @ionic-native/file @ionic-native/document-viewer @ionic-native/file-transfer
|
To make sure we can use them also add them to your app/app.module.ts like this:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
|
import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { SplashScreen } from '@ionic-native/splash-screen';
import { StatusBar } from '@ionic-native/status-bar';
import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';
import { File } from '@ionic-native/file';
import { FileTransfer } from '@ionic-native/file-transfer';
import { DocumentViewer } from '@ionic-native/document-viewer';
@NgModule({
declarations: [
MyApp,
HomePage
],
imports: [
BrowserModule,
IonicModule.forRoot(MyApp)
],
bootstrap: [IonicApp],
entryComponents: [
MyApp,
HomePage
],
providers: [
StatusBar,
SplashScreen,
{provide: ErrorHandler, useClass: IonicErrorHandler},
File,
DocumentViewer,
FileTransfer
]
})
export class AppModule {}
|
To make sure we can use them also add them to your app/app.module.ts l
ionic cordova plugin add cordova-plugin-document-viewer
npm install --save @ionic-native/document-viewer
import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { HttpHeaders } from '@angular/common/http';
@Injectable()
export class ServHttpProvider {
constructor(public http: HttpClient) {
console.log('Hello ServHttpProvider Provider');
}
getdata(url:string,responseType:string='text') {
return this.http.get(url,
{
headers:new HttpHeaders()
.set('Content-Type', 'text/xml')
.append('Access-Control-Allow-Methods', 'GET')
.append('Access-Control-Allow-Origin', '*')
.append('Access-Control-Allow-Headers', "Access-Control-Allow-Headers, Access-Control-Allow-Origin, Access-Control-Request-Method"),
responseType:'text'
})
}
}
app.module
import { HttpClientModule } from '@angular/common/http';
Dans import ajouter : HttpClientModule;
page pdfvoir
import { Component, OnInit } from '@angular/core';
//import { HttpClient, HttpHeaders, HttpErrorResponse, HttpRequest } from '@angular/common/http';
import {File} from '@ionic-native/file';
import { DocumentViewer } from '@ionic-native/document-viewer';
import { ServHttpService } from './../serv-http.service';
@Component({
selector:'app-pdfvoir',
templateUrl:'./pdfvoir.page.html',
styleUrls: ['./pdfvoir.page.scss'],
})
export class PdfvoirPage implements OnInit {
constructor(publicservHttp:ServHttpService,privatefile:File, privatedocumentViewer:DocumentViewer)
{
//this.navCtrl.push(BilanPage,{lien:"bilan"});
//this.gjson.getPara();
leturl:string="sciences";
servHttp.getdata(url).subscribe((data)=>
{
alert("ok");
});
}
ngOnInit() {
}
}
