I want to create a web app with a registration and the Google Recaptcha. I have oriented on this example:
I want to use the normal version use, but the Google Recaptcha will not display in the HTML. what do I wrong?
Here is my code, is something missing pls write to me.
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 { SplashScreen } from '#ionic-native/splash-screen/ngx';
import { StatusBar } from '#ionic-native/status-bar/ngx';
import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
import { RecaptchaModule, RECAPTCHA_SETTINGS, RecaptchaSettings } from 'ng-recaptcha';
#NgModule({
declarations: [AppComponent],
entryComponents: [],
imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule, RecaptchaModule],
providers: [
StatusBar,
SplashScreen,
{
provide: RECAPTCHA_SETTINGS,
useValue: {
siteKey: '6Lee7qgZAAAAAC6i7J0fkf0_7ShBQKSXx8MafWHZ',
} as RecaptchaSettings,
},
{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
],
bootstrap: [AppComponent]
})
export class AppModule {}
home.page.html
<ion-header [translucent]="true">
<ion-toolbar>
<ion-title>
Blank
</ion-title>
</ion-toolbar>
</ion-header>
<ion-content [fullscreen]="true">
<re-captcha (resolved)="resolveCaptcha($event)"></re-captcha>
</ion-content>
home.page.ts
import { Component } from '#angular/core';
import { RecaptchaModule } from 'ng-recaptcha'; // I don't if I need this import in this file
#Component({
selector: 'app-home',
templateUrl: 'home.page.html',
styleUrls: ['home.page.scss'],
})
export class HomePage {
constructor() {}
resolveCaptcha(event)
{
console.log(event)
}
}
Thanks for the help.
I have found an answer for my problem:
*.html
<re-captcha (resolved)="resolved($event)"></re-captcha>
*.page.ts
resolved(response: string) {
console.log(`Resolved captcha with response: ${response}`); if(response != null)
if(response != null && response != undefined) {
this.captchaPassed = !this.captchaPassed;
}
}
*.module.ts
import { RecaptchaComponent, RECAPTCHA_SETTINGS, RecaptchaSettings, RecaptchaModule } from 'ng-recaptcha' // muss hinzugefühgt werden /** nur wenn es auf einer seite sein soll */
#NgModule({
imports: [
CommonModule,
...
RecaptchaModule,
],
declarations: [RegisterPage],
providers: [
{
provide: RECAPTCHA_SETTINGS,
useValue: {
siteKey: '6Lee7qgZAAAAAC6i7J0fkf0_7ShBQKSXx8MafWHZ',
} as RecaptchaSettings,
},
],
})
Related
I have a code sharing Nativescript-Angular project. I am using two ListView's in a Lazy loaded module. The lazy loaded module is structured such that when I navigate to that module from AppModule.
<TabView id="tabViewContainer">
<page-router-outlet actionBarVisibility="never" *tabItem="{title: 'Players'}" name="playersTab"></page-router-outlet>
<page-router-outlet actionBarVisibility="never" *tabItem="{title: 'Event Requests'}" name="eventRequestsTab"></page-router-outlet>
</TabView>
Now each tab item is a page-router-outlet which routes to a child component and that child
component has ListView as parent element as shown below.
<ListView
class="list-group"
[items]="players"
(loaded)="onListViewLoaded($event)"
#listView
>
<ng-template let-player="item" let-third="third">
<GridLayout class="list-group-item" rows="*" columns="auto, *">
<Image
col="0"
[src]="player.photoURL"
class="thumb img-circle"
></Image>
<StackLayout col="1">
<Label
[text]="player.displayName"
class="list-group-item-heading"
></Label>
<Label
[text]="player.uid"
class="list-group-item-text"
textWrap="true"
></Label>
</StackLayout>
</GridLayout>
</ng-template>
</ListView>
Now the problem I am facing is when these two list views are shown side by side sometimes both the list views don't show anything and sometimes only the second tab shows data where as the first tab only shows the item dividers as shown below:-
Case 1 tab-1
Case 1 tab-2
Case 2 tab-1
Case 2 tab-2
The items always have more than one element but still this problem is being arised.
I have tried using the function listview.refresh() but still no success with that. I have also used ChangedDetectionStratergy.OnPush and called markedForRefresh function when data is received. I have tried using ObservableArray provided by Nativescript but I was bit confused while using that and also I felt it was not available for code sharing project.
I am frustrated since yesterday and it looks like a bug in Nativescript. Can you help overcome it so that both tabs shows the data always(knowing the arrays always have atleast one element) ?
Two listview is working inside tabView for example:-
app.component.html :-
`<TabView androidTabsPosition="bottom">
<page-router-outlet *tabItem="{title: 'Home', iconSource: getIconSource('home')}"
name="homeTab">
</page-router-outlet>
<page-router-outlet *tabItem="{title: 'Browse', iconSource: getIconSource('browse')}"
name="browseTab">
</page-router-outlet>
</TabView>`
app.component.ts:-
`import { Component, OnInit } from "#angular/core";
import { isAndroid } from "tns-core-modules/platform";
#Component({
selector: "ns-app",
moduleId: module.id,
templateUrl: "app.component.html"
})
export class AppComponent implements OnInit {
constructor() {
// Use the component constructor to inject providers.
}
ngOnInit(): void {
// Init your component properties here.
}
getIconSource(icon: string): string {
const iconPrefix = isAndroid ? "res://" : "res://tabIcons/";
return iconPrefix + icon;
}
}
`
app.module.ts :-
`import { NgModule, NO_ERRORS_SCHEMA } from "#angular/core";
import { NativeScriptModule } from "nativescript-angular/nativescript.module";
import { AppRoutingModule } from "./app-routing.module";
import { AppComponent } from "./app.component";
#NgModule({
bootstrap: [
AppComponent
],
imports: [
NativeScriptModule,
AppRoutingModule
],
declarations: [
AppComponent
],
schemas: [
NO_ERRORS_SCHEMA
]
})
export class AppModule { }
`
app.routing.ts :-
`import { NgModule } from "#angular/core";
import { Routes } from "#angular/router";
import { NSEmptyOutletComponent } from "nativescript-angular";
import { NativeScriptRouterModule } from "nativescript-angular/router";
const routes: Routes = [
{
path: "",
redirectTo: "/(homeTab:home/default//browseTab:browse/default)",
pathMatch: "full"
},
{
path: "home",
component: NSEmptyOutletComponent,
loadChildren: "~/app/home/home.module#HomeModule",
outlet: "homeTab"
},
{
path: "browse",
component: NSEmptyOutletComponent,
loadChildren: "~/app/browse/browse.module#BrowseModule",
outlet: "browseTab"
}
];
#NgModule({
imports: [NativeScriptRouterModule.forRoot(routes)],
exports: [NativeScriptRouterModule]
})
export class AppRoutingModule { }
`
home.component.html :-
`<GridLayout class="page page-content">
<ListView [items]="items" class="list-group">
<ng-template let-item="item">
<ScrollView height="150">
<Label [text]="item.name" class="list-group-item"></Label>
</ScrollView>
</ng-template>
</ListView>
</GridLayout>`
home.component.ts:-
`import { Component, OnInit } from "#angular/core";
import { DataService, IDataItem } from "../shared/data.service";
#Component({
selector: "Home",
moduleId: module.id,
templateUrl: "./home.component.html"
})
export class HomeComponent implements OnInit {
items: Array<IDataItem>;
constructor(private _itemService: DataService) { }
ngOnInit(): void {
this.items = this._itemService.getItems();
}
}`
home.module.ts:-
`import { NgModule, NO_ERRORS_SCHEMA } from "#angular/core";
import { NativeScriptCommonModule } from "nativescript-angular/common";
import { HomeRoutingModule } from "./home-routing.module";
import { HomeComponent } from "./home.component";
import { ItemDetailComponent } from "./item-detail/item-detail.component";
#NgModule({
imports: [
NativeScriptCommonModule,
HomeRoutingModule
],
declarations: [
HomeComponent,
ItemDetailComponent
],
schemas: [
NO_ERRORS_SCHEMA
]
})
export class HomeModule { }`
home-routing.module.ts:-
`import { NgModule } from "#angular/core";
import { Routes } from "#angular/router";
import { NativeScriptRouterModule } from "nativescript-angular/router";
import { HomeComponent } from "./home.component";
import { ItemDetailComponent } from "./item-detail/item-detail.component";
const routes: Routes = [
{ path: "default", component: HomeComponent },
{ path: "item/:id", component: ItemDetailComponent }
];
#NgModule({
imports: [NativeScriptRouterModule.forChild(routes)],
exports: [NativeScriptRouterModule]
})
export class HomeRoutingModule { }`
browse.component.html :-
`<GridLayout class="page page-content">
<ListView [items]="items" class="list-group">
<ng-template let-item="item">
<ScrollView height="150">
<Label [text]="item.name" class="list-group-item"></Label>
</ScrollView>
</ng-template>
</ListView>
</GridLayout>`
browse.component.ts:-
`import { Component, OnInit } from "#angular/core";
import { DataService, IDataItem } from "../shared/data.service";
#Component({
selector: "Browse",
moduleId: module.id,
templateUrl: "./browse.component.html"
})
export class BrowseComponent implements OnInit {
items: Array<IDataItem>;
constructor(private _itemService: DataService) { }
ngOnInit(): void {
this.items = this._itemService.getItems();
}
}
`
browse.module.ts:-
`import { NgModule, NO_ERRORS_SCHEMA } from "#angular/core";
import { NativeScriptCommonModule } from "nativescript-angular/common";
import { BrowseRoutingModule } from "./browse-routing.module";
import { BrowseComponent } from "./browse.component";
import { DataService } from "../shared/data.service";
#NgModule({
imports: [
NativeScriptCommonModule,
BrowseRoutingModule
],
declarations: [
BrowseComponent
],
schemas: [
NO_ERRORS_SCHEMA
],
providers:[
DataService
]
})
export class BrowseModule { }`
browse-routing.module.ts:-
`import { NgModule } from "#angular/core";
import { Routes } from "#angular/router";
import { NativeScriptRouterModule } from "nativescript-angular/router";
import { BrowseComponent } from "./browse.component";
const routes: Routes = [
{ path: "default", component: BrowseComponent }
];
#NgModule({
imports: [NativeScriptRouterModule.forChild(routes)],
exports: [NativeScriptRouterModule]
})
export class BrowseRoutingModule { }
`
Example Available On Here:-
Nativescript playground url
I'm working on a project with tabs in it but it should only appear after user login.
The tabs works just fine when its route in app.routing.module.ts is like this:
{ path: '', loadChildren: './tabs/tabs.module#TabsPageModule' }
But when I use login like this:
{ path: '', loadChildren: './login/login.module#LoginPageModule' },
{ path: 'home', loadChildren: './tabs/tabs.module#TabsPageModule' }
It doesnt work.
app.routing.module.ts
import { NgModule } from '#angular/core';
import { Routes, RouterModule } from '#angular/router';
const routes: Routes = [
{ path: '', loadChildren: './login/login.module#LoginPageModule' },
{ path: 'home', loadChildren: './tabs/tabs.module#TabsPageModule' },
];
#NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
tabs.routing.module.ts
import { NgModule } from '#angular/core';
import { RouterModule, Routes } from '#angular/router';
import { TabsPage } from './tabs.page';
const routes: Routes = [
{
path: 'home',
component: TabsPage,
children: [
{
path: '',
redirectTo: '/home/(MyPlaces:MyPlaces)',
pathMatch: 'full'
},
{
path: 'MyPlaces',
outlet: 'MyPlaces',
loadChildren: '../MyPlaces/MyPlaces.module#MyPlacesPageModule'
},
{
path: 'Messages',
outlet: 'Messages',
loadChildren: '../Messages/Messages.module#MessagesPageModule'
}
]
}
];
#NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class TabsPageRoutingModule { }
Import the TabsPageModule and put it on app.module.ts to the imports: [...].
This works for me.
import { NgModule } from '#angular/core';
import { BrowserModule } from '#angular/platform-browser';
import { RouterModule, RouteReuseStrategy } from '#angular/router';
import { IonicModule, IonicRouteStrategy } from '#ionic/angular';
import { SplashScreen } from '#ionic-native/splash-screen/ngx';
import { StatusBar } from '#ionic-native/status-bar/ngx';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { TabsPageModule } from './tabs/tabs.module';
#NgModule({
declarations: [AppComponent],
entryComponents: [],
imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule, TabsPageModule],
providers: [
StatusBar,
SplashScreen,
{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
],
bootstrap: [AppComponent]
})
export class AppModule {}
After so many attempts I found that this approach will never work like that at least for now the only way for this to work is to not use lazy loading the code will be like that:
app.routing.module.ts
import { NgModule } from '#angular/core';
import { Routes, RouterModule } from '#angular/router';
import { TabsPage } from './tabs/tabs.page'
const routes: Routes = [
{ path: '', loadChildren: './login/login.module#LoginPageModule' },
{ path: 'home', component: TabsPage },
];
#NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
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 { SplashScreen } from '#ionic-native/splash-screen/ngx';
import { StatusBar } from '#ionic-native/status-bar/ngx';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { TabsPageModule } from './tabs/tabs.module';
#NgModule({
declarations: [AppComponent],
entryComponents: [],
imports: [BrowserModule,
IonicModule.forRoot(),
AppRoutingModule,
TabsPageModule
],
providers: [
StatusBar,
SplashScreen,
{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
],
bootstrap: [AppComponent]
})
export class AppModule { }
Notice importing TabsPageModule.
tabs.routing.module.ts
import { NgModule } from '#angular/core';
import { RouterModule, Routes } from '#angular/router';
import { TabsPage } from './tabs.page';
import { MyPlacePage } from '../MyPlaces/MyPlaces.Page';
import { MessagesPage } from '../Messages/Messages.Page';
const routes: Routes = [
{
path: 'home',
component: TabsPage,
children: [
{
path: '',
redirectTo: '/home/(MyPlaces:MyPlaces)',
pathMatch: 'full'
},
{
path: 'MyPlaces',
outlet: 'MyPlaces',
component: MyPlacePage
},
{
path: 'Messages',
outlet: 'Messages',
component: MessagesPage
}
]
}
];
#NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class TabsPageRoutingModule { }
tabs.module.ts
import { IonicModule } from '#ionic/angular';
import { NgModule } from '#angular/core';
import { CommonModule } from '#angular/common';
import { FormsModule } from '#angular/forms';
import { TabsPageRoutingModule } from './tabs.router.module';
import { TabsPage } from './tabs.page';
import { MyPlacesPageModule } from '../MyPlaces/MyPlaces.module';
import { MessagesPageModule } from '../Messages/Messages.module';
#NgModule({
imports: [
IonicModule,
CommonModule,
FormsModule,
TabsPageRoutingModule,
MyPlacesPageModule,
MessagesPageModule
],
declarations: [TabsPage]
})
export class TabsPageModule {}
Notice also that you need to work with href to link tabs page not routerLiknk.
I found a way to do this with lazy loading. In the page which contains the tabs we add a new variable which is a class and updated when the navigation changes:
<ion-tabs [class]="'url' + currentUrl">
</ion-tabs>
This class is updated in the .ts file:
import {Router,Event,NavigationEnd} from '#angular/router';
#Component({
selector: 'app-home',
templateUrl: './home.page.html',
styleUrls: ['./home.page.scss'],
})
export class HomePage implements OnInit {
public notificationCount = 0;
public currentUrl: string;
constructor(private router: Router) {
this.router.events.subscribe((event: Event) => {
if (event instanceof NavigationEnd) {
console.log('loading finished', event);
this.currentUrl = event.url.split('/').join('-')
}
});
}
In this way you can hide the tabbar using css in your global.scss
ion-tabs {
&.url-home-tournaments-main-play,
&.url-home-tournaments-main-play-score {
ion-tab-bar {
display: none;
}
}
}
When I run ionic serve i'm getting the following error below. Why I'm I getting the error? Does it have to do with IonicModule.forRoot(MyApp)?
This is my .html component:
<ion-header>
<ion-navbar>
<ion-title>
Ionic Blank
</ion-title>
</ion-navbar>
</ion-header>
<ion-content>
<ion-list inset>
<ion-item *ngFor="let bill of bills">
<h2>{{bill.bill_no}}</h2>
</ion-item>
</ion-list>
</ion-content>
bills.ts
import { Component } from '#angular/core';
import { IonicPage, IonicModule , NavController, NavParams } from 'ionic-angular';
import { Observable } from 'rxjs/Observable';
import { HttpClient } from '#angular/common/http';
import { Api } from '../../providers/api/api';
import { BillServiceProvider } from '../../providers/bill-service/bill-service';
/**
* Generated class for the BillsPage page.
*
* See https://ionicframework.com/docs/components/#navigation for more info on
* Ionic pages and navigation.
*/
#IonicPage()
#Component({
selector: 'page-bills',
templateUrl: 'bills.html',
})
export class BillsPage {
bills: any;
// constructor(public navCtrl: NavController, public navParams: NavParams) {
// }
constructor(public navCtrl: NavController, public BillServiceProvider: BillServiceProvider ) {
this.getBills();
// .subscribe(data => {
// console.log('my data: ', data);
// },
// ionViewDidLoad() {
// console.log('ionViewDidLoad BillsPage');
}
getBills() {
this.BillServiceProvider.getBills()
.then(data => {
this.bills = data;
console.log(this.bills);
});
}
// openDetails(bill){
// this.navCtrl.push('BillDetailsPage', {bill: bill});
// }
}
app.module.ts
import { BillsPage } from './../pages/bills/bills';
import { HttpClient, HttpClientModule } from '#angular/common/http';
import { ErrorHandler, NgModule } from '#angular/core';
import { BrowserModule } from '#angular/platform-browser';
import { Camera } from '#ionic-native/camera';
import { SplashScreen } from '#ionic-native/splash-screen';
import { StatusBar } from '#ionic-native/status-bar';
import { IonicStorageModule, Storage } from '#ionic/storage';
import { TranslateLoader, TranslateModule } from '#ngx-translate/core';
import { TranslateHttpLoader } from '#ngx-translate/http-loader';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { Items } from '../mocks/providers/items';
import { Settings, User, Api } from '../providers';
import { MyApp } from './app.component';
import { PaymentServiceProvider } from '../providers/payment-service/payment-service';
import { BillServiceProvider } from '../providers/bill-service/bill-service';
// The translate loader needs to know where to load i18n files
// in Ionic's static asset pipeline.
export function createTranslateLoader(http: HttpClient) {
return new TranslateHttpLoader(http, './assets/i18n/', '.json');
}
export function provideSettings(storage: Storage) {
/**
* The Settings provider takes a set of default settings for your app.
*
* You can add new settings options at any time. Once the settings are saved,
* these values will not overwrite the saved values (this can be done manually if desired).
*/
return new Settings(storage, {
option1: true,
option2: 'Ionitron J. Framework',
option3: '3',
option4: 'Hello'
});
}
#NgModule({
declarations: [
MyApp,
BillsPage
],
imports: [
BrowserModule,
HttpClientModule,
TranslateModule.forRoot({
loader: {
provide: TranslateLoader,
useFactory: (createTranslateLoader),
deps: [HttpClient]
}
}),
IonicModule.forRoot(MyApp),
IonicStorageModule.forRoot()
],
bootstrap: [IonicApp],
entryComponents: [
MyApp,
BillsPage
],
providers: [
Api,
Items,
User,
Camera,
SplashScreen,
StatusBar,
{ provide: Settings, useFactory: provideSettings, deps: [Storage] },
// Keep this to enable Ionic's runtime error handling during development
{ provide: ErrorHandler, useClass: IonicErrorHandler },
PaymentServiceProvider,
BillServiceProvider
]
})
export class AppModule { }
I created a simple tab layout application in ionic framework. I created a Extra tab and tried exactly as other tabs are implemented. But when i tried
Everything was a same as other tabs! What was i missing here?
My app.module.ts is:
import { NgModule, ErrorHandler } from '#angular/core';
import { BrowserModule } from '#angular/platform-browser';
import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
import { MyApp } from './app.component';
import { AboutPage } from '../pages/about/about';
import { ContactPage } from '../pages/contact/contact';
import { HomePage } from '../pages/home/home';
import { TabsPage } from '../pages/tabs/tabs';
import { ListPage } from '../pages/lists/lists';
import { StatusBar } from '#ionic-native/status-bar';
import { SplashScreen } from '#ionic-native/splash-screen';
#NgModule({
declarations: [
MyApp,
AboutPage,
ContactPage,
HomePage,
ListPage,
TabsPage
],
imports: [
BrowserModule,
IonicModule.forRoot(MyApp)
],
bootstrap: [IonicApp],
entryComponents: [
MyApp,
AboutPage,
ContactPage,
HomePage,
ListPage,
TabsPage
],
providers: [
StatusBar,
SplashScreen,
{provide: ErrorHandler, useClass: IonicErrorHandler}
]
})
export class AppModule {}
Here ListPage is extra class i created! I am very new to this!
TabsPage is:
import { Component } from '#angular/core';
import { AboutPage } from '../about/about';
import { ContactPage } from '../contact/contact';
import { HomePage } from '../home/home';
import { ListPage } from '../lists/lists';
#Component({
templateUrl: 'tabs.html'
})
export class TabsPage {
tab1Root = HomePage;
tab2Root = AboutPage;
tab3Root = ContactPage;
tab4Root = ListPage;
constructor() {
}
}
And lists.ts file is:
import { Component } from '#angular/core';
import { NavController } from 'ionic-angular';
#Component({
selector: 'page-lists',
templateUrl: 'lists.html'
})
export class ListPage {
constructor(public navCtrl: NavController) {
}
}
Please check your tabs.html. It should be like:
<ion-tabs>
<ion-tab [root]="tab1Root"></ion-tab>
<ion-tab [root]="tab2Root"></ion-tab>
<ion-tab [root]="tab3Root"></ion-tab>
<ion-tab [root]="tab4Root"></ion-tab>
</ion-tabs>
I try to use MathJax in my ionic 2 application. I have an error message when I try to build
E:\Users\Renaud\Applisionic\QCM>ionic cordova build android --prod --release
Running app-scripts build: --prod --iscordovaserve --externalIpRequired --nobrowser
[09:56:52] build prod started ...
[09:56:52] clean started ...
[09:56:52] clean finished in 4 ms
[09:56:52] copy started ...
[09:56:52] ngc started ...
Error: Template parse errors:
Can't bind to 'MathJax' since it isn't a known property of 'div'. ("
<ion-content>
<div MathJax [ERROR ->][MathJax]="formulae">{{formulae}}</div>
<button ion-button block color="secondary" (click)="goToR"): ng:///E:/Users/Renaud/Applisionic/QCM/src/pages/adversaire/adversaire.html#11:14
My directive is define in math-jax.ts :
import {Directive, ElementRef, Input, Component} from '#angular/core';
#Directive({
selector: '[MathJax]'
})
export class MathJaxDirective {
#Input('MathJax') MathJaxInput: string;
constructor(private el: ElementRef) {
}
ngOnChanges() {
console.log('>> ngOnChanges');
this.el.nativeElement.innerHTML = this.MathJaxInput;
console.log(this.MathJaxInput);
eval('MathJax.Hub.Queue(["Typeset",MathJax.Hub, this.el.nativeElement])');
}
}
My HTML file adversaire.html :
<ion-content>
<div MathJax [MathJax]="formulae">{{formulae}}</div>
</ion-content>
The file adversaire.ts :
import { Component } from '#angular/core';
#IonicPage({
name: "adversaire"
})
#Component({
selector: 'page-adversaire',
templateUrl: 'adversaire.html'
})
export class AdversairePage {
formulae : String ;
constructor() {
this.formulae="`sum_(i=1)^n i^3=((n(n+1))/2)^2`";
}
My directive is delare in app.module.ts :
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 { AppReno } from './app.component';
import { HomePage } from '../pages/home/home';
import { MathJaxDirective } from '../directives/math-jax/math-jax';
#NgModule({
declarations: [
AppReno,
HomePage,
MathJaxDirective,
],
imports: [
BrowserModule,
IonicModule.forRoot(AppReno),
],
bootstrap: [IonicApp],
entryComponents: [
AppReno,
HomePage,
],
providers: [
StatusBar,
SplashScreen,
{provide: ErrorHandler, useClass: IonicErrorHandler},
]
})
export class AppModule {}