Im using onsen-ui with angular 8 I'm getting error in the below function, I am not sure why this happens, because it is the code from the onsenUI-page.
push(event, value){
console.log(value);
this.navigator.element.pushPage(value, {animation: 'slide'});
}
My code
Sidemenu.html
<ons-page id="menu">
<ons-toolbar>
<div class="center">Menu</div>
</ons-toolbar>
<div class="background"></div>
<div class="content">
<ons-list>
<ons-list-item (click)="push($event, 'HomeComponent')" tappable>
Home
</ons-list-item>
<ons-list-item (click)="push($event, 'FormComponent')" tappable>
Form
</ons-list-item>
</ons-list>
</div>
</ons-page>
sidemenucomponent.html
import { Component, OnInit } from '#angular/core';
import { ViewChild, OnsNavigator} from 'ngx-onsenui';
import { HomeComponent } from './../home/home.component';
#Component({
selector: 'ons-page[third]',
templateUrl: './sidemenu.component.html',
styleUrls: ['./sidemenu.component.scss'],
providers:[OnsNavigator]
})
export class SidemenuComponent implements OnInit {
constructor(private navigator: OnsNavigator) { }
ngOnInit() {
}
push(event, value){
console.log(value);
this.navigator.element.pushPage(value, {animation: 'slide'});
}
}
Im getting error
ERROR TypeError: this.navigator.element.pushPage is not a function
at SidemenuComponent.push (sidemenu.component.ts:20)
at Object.eval [as handleEvent] (VM5587 SidemenuComponent.ngfactory.js:21)
at handleEvent (core.js:43993)
at callWithDebugContext (core.js:45632)
at Object.debugHandleEvent [as handleEvent] (core.js:45247)
at dispatchEvent (core.js:29804)
at core.js:42925
at HTMLElement.<anonymous> (platform-browser.js:2668)
at ZoneDelegate.invokeTask (zone-evergreen.js:391)
at Object.onInvokeTask (core.js:39680)
Below is the app component i added but still getting same error
app.component.html
<ons-navigator swipeable [page]="sidePage"></ons-navigator>
<ons-page id="apppage">
<ons-splitter #splitter>
<ons-splitter-side [page]="sidePage" side="left" width="300px" collapse swipeable>
</ons-splitter-side>
<ons-splitter-content [page]="contentPage">
</ons-splitter-content>
</ons-splitter>
</ons-page>
<router-outlet></router-outlet>
app.component.ts
import { Component } from '#angular/core';
import { HomeComponent } from './components/home/home.component';
import { SidemenuComponent } from './components/sidemenu/sidemenu.component';
import { MenuService } from './menu-service.service';
import {
Injectable,
ViewChild,
} from 'ngx-onsenui';
#Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
title = 'my-app';
sidePage = SidemenuComponent;
contentPage = HomeComponent;
#ViewChild('splitter',{static: false}) splitter;
constructor(private menuService: MenuService) {
this.menuService.menu$.subscribe(() => this.splitter.nativeElement.side.open());
}
}
Please can anyone help.
Related
I am trying to open a pdf in my ionic 5 application with the plugin
npm i # pdftron / pdfjs-express --save
but ionic shows me the error Cannot match any routes. URL Segment: 'lib / ui / index.html'
please how to correct this error?
my code:
app.component.html
<div class="page">
<div class="header">Angular sample</div>
<div #viewer class="viewer"></div>
</div>
app.component.ts
import { Component, ViewChild, OnInit, ElementRef, AfterViewInit } from '#angular/core';
import WebViewer from '#pdftron/pdfjs-express';
#Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit, AfterViewInit {
#ViewChild('viewer', { static: false }) viewer: ElementRef;
wvInstance: any;
ngAfterViewInit(): void {
WebViewer({
path: '../lib',
initialDoc: '../files/webviewer-demo-annotated.pdf'
}, this.viewer.nativeElement).then(instance => {
this.wvInstance = instance;
})
}
ngOnInit() {
}
}
Have you used any of our angular samples here https://github.com/PDFTron?q=angular? You can clone one of the samples and take a look at how it is implemented
I'm new to Angular and I have some issues , hope you'll help me.
so I'm trying to share a value of a variable from a ProjectComponent to an AcceuilComponent , the value of this variable is displaying correctly into my acceuil.component.html but when I try to use it into my acceuil.component.ts it's undefined !
project.component.html (the parent component)
<app-header-in></app-header-in>
<ng-sidebar-container>
<ng-sidebar [opened]="opened">
<p> Sidebar </p>
<button (click)="Sidebar()">
Close Sidebar
</button>
<ul class="menu">
<li class="hh"
*ngFor="let project of projects"
[class.selected]="project === selectedProject"
(click)="onSelect(project)">
{{project.nomprojet}}</li>
</ul>
</ng-sidebar>
<div ng-sidebar-content >
<br><br><br><br>
<button (click)="Sidebar()">
Open Sidebar
</button>
<app-acceuil [message]="idProject"></app-acceuil>
</div>
</ng-sidebar-container>
project.component.ts
import { Component, OnInit } from '#angular/core';
import { ApiService } from '../api.service';
import {ProjectService} from '../project.service';
import {PartService} from '../part.service';
#Component({
selector: 'app-project',
templateUrl: './project.component.html',
styleUrls: ['./project.component.css']
})
export class ProjectComponent implements OnInit {
opened=true;
projects:any;
idProject;
selectedProject;
constructor(private projectService:ProjectService) { }
ngOnInit(): void {
this.projectService.getProjects().subscribe((result)=>{console.log("result",result)
this.projects=result})
}
Sidebar(){
this.opened=!this.opened;
}
onSelect(pro): void {
this.idProject = pro.id;
}
}
acceuil.component.html (my child component)
<p>{{message}}</p>
<ul >
<li class="hh"
*ngFor="let part of parts">
{{part.nomparti}}
</li>
</ul>
acceuil.component.ts
import { Component, OnInit,Input } from '#angular/core';
import { ApiService } from '../api.service';
import {PartService} from '../part.service';
#Component({
selector: 'app-acceuil',
templateUrl: './acceuil.component.html',
styleUrls: ['./acceuil.component.css']
})
export class AcceuilComponent implements OnInit {
#Input() message;
parts:any;
constructor(private partService:PartService) {
}
ngOnInit(): void{
console.log("id",this.message);
this.partService.getPartsFromIdProject(this.message).subscribe((result)=>{console.log("result",result)
this.parts=result})
}
ngOnChanges() {
if(this.message) {
console.log(this.message)
}
}
}
I'm using the message to call a service and displaying data .
in the acceuil.component.html <p>{{message}}</p> is displaying correctly but console.log("id",this.message); in acceuil.component.ts displays undefined
As message is an input property, you need to get its value in ngOnchanges life cycle.
First time, when it is in ngOnChanges, input value will be undefined. So for the safe side, better to add a check for not undefiled condition like below
ngOnChanges(changes: SimpleChanges) {
if (changes.message) {
// Should be defined now
console.log(this.message);
}
}
I want to fetch id from component.html into component.ts to pass it to a service.
.ts file is;
import { Component, OnInit } from '#angular/core';
import { HttpClient } from '#angular/common/http'
import { HttpErrorResponse } from '#angular/common/http/src/response';
import { SendUsingApiService } from '../send-using-api.service';
import { Router, ActivatedRoute } from '#angular/router';
import { FormBuilder, FormGroup, Validators } from '#angular/forms';
import { setDefaultService } from 'selenium-webdriver/chrome';
#Component({
selector: 'app-org-info',
templateUrl: './org-info.component.html',
styleUrls: ['./org-info.component.css'],
providers: [SendUsingApiService]
})
export class OrgInfoComponent implements OnInit {
orgData: string[] = [];
Id = 1;
editRecord:FormGroup;
constructor(private httpService: HttpClient, private _serv: SendUsingApiService,
private fb: FormBuilder, private _ar:ActivatedRoute, private _r:Router) {
this.editRecord = this.fb.group({
Id:['1', []],
OrganisationName:['', []],
ContactPerson:['', []],
ContactPersonHPNo:['', []],
ContactPersonEmailId:['', []]
});
}
ngOnInit() {
console.log(this._ar.snapshot.params.Id, "+ve");
this._ar.params.subscribe(() => {
this._serv.getUsers(this._ar.snapshot.params.Id).subscribe((res)=>{
console.log(res);
this.setUser(res);
});
});
}
I am getting the value for console.log(this._ar.snapshot.params.Id); as undefined "+ve".
I want to get the Id value in console.
As per requests I am adding html part, though little adjusted;
<td style="text-align: center;">
<a class="btn btn-basic" [routerLink]="['/org-info',data['Id']]" role="button" (click)="getOrgData(data.Id)">View</a>
</td>
I defined a property instead of Id = 1; (above)
paramId = '';
then, within ngOnInit;
ngOnInit() {
this.paramId = this._ar.snapshot.params.Id;
console.log(paramId, "+ve");
}
Doing this, I got the Id value instead of undefined.
I could use some help.
Lets say i have a directive:
import { Directive } from '#angular/core';
#Directive( {
selector: '[appMyDirective]'
} )
export class MyDirective {
constructor () {
}
seyHey () {
console.log( 'hey hey!' );
}
}
And i have a component
import { Component, OnInit, ViewChild } from '#angular/core';
import { MyDirective } from "../my-directive.directive";
#Component({
selector: 'app-my-component',
templateUrl: './my-component.component.html',
styleUrls: ['./my-component.component.css']
})
export class MyComponentComponent implements OnInit {
#ViewChild(MyDirective) appMyDirective: MyDirective;
constructor() { }
ngOnInit() {
this.appMyDirective.seyHey();
}
}
Component template:
<p appMyDirective>
my-component works!
</p>
app.component.html
<app-my-component></app-my-component>
All good. I get hey hey on console. But i want to attach directive to component selector like so:
<app-my-component appMyDirective></app-my-component>
And be able to call directive methods inside component class. How?
Tnx for your time
Try accessing it like you would a Provider (in the constructor).
In your example...
import { Component, OnInit, Optional } from '#angular/core';
import { MyDirective } from "../my-directive.directive";
#Component({
selector: 'app-my-component',
templateUrl: './my-component.component.html',
styleUrls: ['./my-component.component.css']
})
export class MyComponentComponent implements OnInit {
constructor(#Optional() private appMyDirective: MyDirective) { }
ngOnInit() {
this.appMyDirective.seyHey();
}
}
I've added the #Optional in case the directive is optional on your component, which may occur in some cases.
Oh, and this also works on Directive to Directive..
#Directive({....})
export class MyDirective {
constructor(#Optional() private appMyDirective: MyDirective) { }
}
This was tested on my project and works. The property was even ready in the constructor. Just keep an eye on any cyclical references (e.g. component calls the directive, the directive calls the component, etc..)
Happy Coding.
How to Implment this?
My SubComponent
import {Component,Input,ngOnInit} from 'angular2/core';
#Component({
selector: 'my-component',
template: `
<div>In child component - myAttr = {{ myAttr1 }}</div>
`
})
export class MyComponent {
#Input() myAttr: number;
myAttr1:number;
ngOnInit()
{
this.myAttr1=this.myAttr*10;
}
}
Main Component
import {Component} from 'angular2/core';
import {MyComponent} from './sub.component';
#Component({
selector: 'my-app',
template: `
<my-component
[(myAttr)]="myAttr"
></my-component>
<button (click)="onClick()">Click</button>
`,
directives: [MyComponent]
})
export class AppComponent {
myAttr: number = 1;
onClick() {
console.log('Click in the parent component');
this.myAttr += 1;
}
}
I need to update the value in each click. There should be a direct approach , else Angular2 team should think about this
You should use ngOnChanges to detect when myAttr is updated in your sub component:
#Component({
selector: 'my-component',
template: `
<div>In child component - myAttr = {{ myAttr1 }}</div>
`
})
export class MyComponent {
#Input() myAttr: number;
myAttr1:number;
ngOnInit() {
this.myAttr1=this.myAttr*10;
}
ngOnChanges() { // <------
this.myAttr1=this.myAttr*10;
}
}
This allows to detect when the myAttr input property is updated and update accordingly the myAttr1 one.
See this plunkr: https://plnkr.co/edit/2SOdq7w3s8iDxBKbiLpU?p=preview.