iam trying to create my own component using Ionic 3 i follow this steps
Step 1 - create the component using command line
ionic g component collapse
Step 2 - add within app.module
...
declarations: [
CollapseComponent
],
...
entryComponents: [
CollapseComponent
],
...
Step 3 - Trying to use the tag
collapse
but i have this bug.
I've tried many alternatives and nothing has worked.
collapse.ts file
import { Component } from '#angular/core';
#Component({
selector: 'collapse',
templateUrl: 'collapse.html'
})
export class CollapseComponent {
text: string;
constructor() {
console.log('Hello CollapseComponent Component');
this.text = 'Hello World';
}
}
* component.mudule.ts file
import {NgModule} from '#angular/core';
import {PopoverComponent} from './popover/popover';
import {CollapseComponent} from './collapse/collapse';
import {IonicModule} from "ionic-angular";
#NgModule({
declarations: [
PopoverComponent,
CollapseComponent
],
imports: [
IonicModule,
],
exports: [
PopoverComponent,
CollapseComponent
]
})
export class ComponentsModule {
}
You have to write your component like that :
#Component({
selector: 'collapse',
templateUrl: `<URL>`
})
export class CollapseComponent {
}
By default, component tags have a prefix like app. You can also try <{prefixe}-collapse>.
selector field is the most important
Related
I am upgrading my angualr from 6 to 13.0.2.
When I do ng build , I get an error:
NG6002: Appears in the NgModule.imports of AppModule, but itself has errors 33 export class AdminModule { }
I am sure, Admin module imports doesn't include any components, all components are part of declarations: []
Not sure what the error is related to. I also upgarded angualr material to 13.0.2.
I tried to setenableIvy to false in tsconfig.app.json.
"angularCompilerOptions": {
"enableIvy" : false,
admin.module.ts
import { CUSTOM_ELEMENTS_SCHEMA, NgModule, NO_ERRORS_SCHEMA } from '#angular/core';
import { CommonModule } from '#angular/common';
import {MatRadioModule} from '#angular/material/radio';
import { ReactiveFormsModule, FormsModule } from '#angular/forms';
import { NgxSpinnerModule } from 'ngx-spinner';
import { MatNativeDateModule } from '#angular/material/core';
import { MaterialModule } from 'src/app/material/material.module';
#NgModule({
imports: [
CommonModule,
MaterialModule,
MatRadioModule,
ReactiveFormsModule,
FormsModule,
NgxSpinnerModule,
MatNativeDateModule
],
declarations: [AdminComponent],
schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class AdminModule { }
app.module.ts
#NgModule({
declarations: [AppComponent, LoginComponent, HomeComponent],
imports: [
AdminModule,
NgxSpinnerModule,
MatDialog,
NgxSliderModule
],
schemas: [CUSTOM_ELEMENTS_SCHEMA],
,
providers: [
],
bootstrap: [AppComponent],
})
export class AppModule {}
My whole application is built as a Library and with RoutingModules and Page.
I have no problem with my Routing as is. But as soon as i open my Capacitor compiled Application in an Emulator and use change Routes for more than one time i cannot use the Back Button.
When i do so my View crashes, mainly the router outlet and i cannot click on anything in the content of my Application. The only working modules are the ones not provided by my router outlet but in the html
library.components.html
<components-header></components-header>
<div [#slide]="getDepth(outlet)">
<router-outlet #outlet="outlet"></router-outlet>
</div>
<components-footer></components-footer>
<components-loading *ngIf="Loading"></components-loading>
library.routing-module.ts
const routes: Routes = [
{
path: 'homepage',
component: HomepageComponent,
data: { animation: 1 }
},
{
path: 'report',
component: ReportComponent,
data: { animation: 2 }
},
{
path: 'settings',
component: SettingsComponent,
data: { animation: 4 }
},
];
#NgModule({
imports: [RouterModule.forRoot(routes, { useHash: true })],
exports: [RouterModule]
})
export class AppRoutingModule { }
app.module.ts
import { AppComponent } from './app.component'
import { LibraryModule } from 'my-lib'
#NgModule({
declarations: [AppComponent],
imports: [
BrowserModule,
IonicModule.forRoot(),
LibraryModule.forRoot(Environment),
LibraryModule.scan(AppComponent)
],
providers: [
//File,
{
provide: RouteReuseStrategy,
useClass: IonicRouteStrategy
},
],
bootstrap: [AppComponent]
})
export class AppModule { }
it makes no difference if i import the RoutingModule directly inside the Application or only in the Library.
If I have a function in:
results.ts
export class ResultsPage implements OnInit {
myFunc() {
alert('my function works!');
}
}
app.component.html
<button (click)="myFunc()">CALL</button>
can I call this function in my app.component.html?
You should use angular providers and services
run ionic g service SomeProvider
inside SomeProvider create your function
import { Injectable } from '#angular/core';
#Injectable()
export class SomeProvider {
constructor() {
}
someFunction(){
console.log("I do something useful!");
}
}
set up as a provider in the app.module.ts file:
#NgModule({
declarations: [
MyApp
],
imports: [
BrowserModule,
IonicModule.forRoot(MyApp)
],
bootstrap: [IonicApp],
entryComponents: [
MyApp
],
providers: [
SomeProvider // <-- List providers here
]
})
export class AppModule { }
inject into classes that want to use them:
import { Component } from '#angular/core';
import { IonicPage } from 'ionic-angular';
import { SomeProvider } from '../../providers/some-provider/some-provider';
#IonicPage()
#Component({
selector: 'page-something',
templateUrl: 'something.html',
})
export class SomePage {
constructor(public myService: SomeService) {
}
ionViewDidLoad() {
this.myService.someFunction(); // This will log "I do something useful!"
}
}
Here you can find complete guide: https://www.joshmorony.com/when-to-use-providersservicesinjectables-in-ionic/
I have just downloaded the angular admin template. Then i add a new component:
ng g n test
When I navigate to the component, the default layout is not applied. I guess it uses the app.component layout. How do you tell the component it should use the default UI?
to add a new componet follow these steps:
create a component-name-routing.module.ts file
create a component-name.module.ts file
create a component-name.component.html file
create a component-name.component.ts file
component-name.component.ts file:
import { Component, OnInit, Input } from "#angular/core";
#Component({
selector: 'app-componentName',
templateUrl: './component-name.component.html',
})
export class NameComponent implements OnInit {}
component-name-routing.module.ts file
import { NgModule } from '#angular/core';
import { Routes, RouterModule } from '#angular/router';
import { NameComponent } from "./component-name.component";
const routes: Routes = [
{
path: '',
component: NameComponent,
data: {
title: 'route title'
},
children: [
{
path: '',
redirectTo: ''
},
]
}
];
#NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class ComponentNameRoutingModule {}
component-name.module.ts file
// Angular
import { CommonModule } from '#angular/common';
import { NgModule } from '#angular/core';
import { FormsModule } from '#angular/forms';
// Theme Routing
import { ComponentNameRoutingModule } from "./component-name-routing.module";
import { ComponentNameComponent } from "./component-name.component";
#NgModule({
imports: [
ComponentNameRoutingModule,
],
declarations: [
ComponentNameComponent
]
})
export class ComponentNameModule {
constructor() {}
}
all this in a new folder in the views directory and you'll be good to go.
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 {}