I've made an ionic and angular project, but I'm having some difficulties making it work, here is the sourcecode, The main issues that I'm having is using the navbar component within the innsjekk and utsjekk components. I've added the selector and there isn't any errors but it doesn't render. Also in the popover component, I added a routerLink to the profile component but nothing happens when I click it.
popover.component.html:
<ion-list>
<ion-item>
<ion-icon name="person-circle-outline"></ion-icon>
<ion-button routerLink="/profil" expand="block" fill="clear" shape="round">
<ion-label>Profil</ion-label>
</ion-button>
</ion-item>
<ion-item *ngIf="isAdmin">
<ion-icon name="settings-outline"></ion-icon>
<ion-button (click)="admin()" expand="block" fill="clear" shape="round">
<ion-label>Admin</ion-label>
</ion-button>
</ion-item>
<ion-item>
<ion-icon name="log-out-outline"></ion-icon>
<ion-button (click)="logut()" expand="block" fill="clear" shape="round">
<ion-label>Log ut</ion-label>
</ion-button>
</ion-item>
</ion-list>
innsjekk.component.html:
<ion-header [translucent]="true">
<app-navbar></app-navbar>
</ion-header>
<ion-content>
<p>Hello world</p>
</ion-content>
I had forgotten to add the components to the module declarations. Doing so fixed it all, I tried building the project then i got errors explaining the problem.
home.module.ts:
import { NgModule } from '#angular/core';
import { CommonModule } from '#angular/common';
import { IonicModule } from '#ionic/angular';
import { FormsModule } from '#angular/forms';
import { HomePage } from './home.page';
import { NavbarComponent } from './../components/navbar/navbar.component';
import { HomePageRoutingModule } from './home-routing.module';
import { AdminComponent } from '../admin/admin.component';
import { InnsjekkComponent } from '../innsjekk/innsjekk.component';
import { PopoverComponent } from '../components/popover/popover.component';
import { LogoutComponent } from '../components/logout/logout.component';
#NgModule({
imports: [
CommonModule,
FormsModule,
IonicModule,
HomePageRoutingModule
],
declarations: [HomePage, NavbarComponent, AdminComponent, InnsjekkComponent, InnsjekkComponent, PopoverComponent, LogoutComponent],
exports: [NavbarComponent]
})
export class HomePageModule {}
If you want to pass HTML as parameter to component, there are a lot of ways, with benefits and limitations. Mostly different:
Content projection. Search for <ng-content>. (most simple but has huge limitations)
Pass template as parameter. Search for #ContentChildren, TemplateRef, ViewContainerRef, structural directives. (flexible)
Pass component's type as #Input and render it inside another (using ViewContainerRef.createComponent, [ngComponentOutlet], etc.). (looks dirty)
They require a bit helping code. There can be some 'perversions' with them. Сhoice depends on many reasons.
share
Related
I'm working on IONIC and I'm trying to do a "dynamic" side menu.
My problem is to call a method from the side-menu "component".
Well there is no problem to call it if the method was in the "TS file" related to the "HTML file" like this <ion-label (click)="onSearch()"> But the method onSearch() is not in the "TS file" related to the "HTML file". Let me explain...
The side-menu as been made like this:
in app.component.html
<ion-app>
<app-side-menu></app-side-menu>
<ion-router-outlet id="mainContent" main></ion-router-outlet>
</ion-app>
in the side-menu.html component
<ion-menu slide="start" type="overlay" contentId="mainContent" menuId="slidingMenu1" id="slidingMenu1">
<ion-header>
<ion-toolbar color="primary">
<ion-title>Menu</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-list>
<ion-menu-toggle auto-hide="false">
<ion-item>
<ion-icon name="Search" color="primary" slot="start"></ion-icon>
<ion-label (click)="onSearch()">
Search
</ion-label>
</ion-menu-toggle>
</ion-list>
</ion-content>
</ion-menu>
and I have a service, CoreMenuService, that call the side-menu, like this :
constructor(public menu: MenuController) { }
// Toggle the Menu1 and hide the one you do not need
public toggleMenu1() {
this.menu.enable(true, 'slidingMenu1');
this.menu.toggle('slidingMenu1');
then in the page I need I will call the side menu:
HTML File
<ion-header>
<ion-toolbar>
<ion-buttons slot="start">
<ion-button (click)="onOpenMenu()"><ion-icon name="menu"></ion-icon></ion-button>
</ion-buttons>
<ion-title>person</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<p class="ion-padding">It's the Person page</p>
</ion-content>
TS File where I want use the method trigger by the side-menu
export class PersonPage implements OnInit {
constructor( public menu: CoreMenuService ) {}
ngOnInit() {}
onOpenMenu() {
this.menu.toggleMenu();
}
onShare() {
console.log('shared');
}
}
So how can I use the method declared in the PersonPage.ts, onShare() from the side-menu component ?
I hope it's clear for you, and that you understand me well. :)
There is the source code if you need it to understand better :
Code
Thanks for your help
Try this
In your side menu component.ts you can do something like:
import { PersonPage } from './../../pages/person/person.page';
export class SideMenuComponent implements OnInit , OnDestroy {
onShare() {
const personPage = new PersonPage(null);
personPage.onShare();
}
}
I am trying to get the button when clicked on to go to a second page in the app but I cannot figure out how to do so. (I am new to Ionic but have been stuck on this for hours)
This is the HTML in home.page.html:
<ion-header>
<ion-toolbar>
<ion-title>
The God Taco
</ion-title>
<ion-buttons end>
<button (click)="gotoAbout()">
About
<ion-icon name="information-circle-outline"></ion-icon>
</button>
</ion-buttons>
</ion-toolbar>
</ion-header>
This is the code in home.page.ts:
import { Component } from '#angular/core';
import { ToastController } from '#ionic/angular';
import { NavController } from '#ionic/angular';
import { AboutPage } from './about.page';
#Component({
selector: 'app-home',
templateUrl: 'home.page.html',
styleUrls: ['home.page.scss'],
})
gotoAbout() {
this.navCtrl.push('AboutPage');
}
Also the folders look like this:
![1]
[link]https://imgur.com/a/fXKxs6D
ERROR in src/app/home/home.page.ts(4,27): error TS2307: Cannot find module './about.page'.
[ng] src/app/home/home.page.ts(12,1): error TS2304: Cannot find name 'gotoAbout'.
When the recompiling this is the error in the terminal.
If you are using Ionic 4 :
You can also redirect it directly in html file :
<ion-button routerLink="/AboutPage"><ion-button>
or another way :
visit this link:
If you're using Ionic 4:
constuctor(private router: Router){}
goToAbout(){
this.router.navigate(['/AboutPage']);
}
Where AboutPage should be the name of the page as defined by the path label in your app-routing.module.ts
I'm trying to get input text value and store it in a variable named input in ionic. But I tried and failed. Can anyone please tell me what I have faulty done?
This is my HTML
<ion-content>
<ion-list>
<ion-item>
<ion-label stacked>display</ion-label>
<ion-input type="text" text-right id="input" ></ion-input>
</ion-item>
</ion-list>
</ion-content>
and this is my home.ts in ionic
import { Component } from '#angular/core';
import { NavController } from 'ionic-angular';
#Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
constructor(public navCtrl: NavController) {
var input=document.getElementById('input').nodeValue;
document.getElementById('seven').innerHTML=input;
}
}
Actually you seems to be using angular not angularjs, use [(ngModel)]
<ion-input type="text" [(ngModel)]="name" text-right id="input" ></ion-input>
and inside the component,
name:string;
so whenever you need the value , you can use.
console.log(this.name);
<ion-content>
<ion-list>
<ion-item>
<ion-label stacked>display</ion-label>
<ion-input type="text" text-right id="input" [(ngModel)]="inputValue"></ion-input>
</ion-item>
</ion-list>
</ion-content>
// ===
import { Component } from '#angular/core';
import { NavController } from 'ionic-angular';
#Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
inputValue: string = "";
constructor(public navCtrl: NavController) {}
someFunction() {
// here you can use the 'this.inputValue' and get the value of the ion-input
}
}
we use the two way binding the value of ion-input with the class member inputValue,
about ngModel
whan you need to access on the value of the input, check the value of inputValue.
here you can see an exemple I wrote on StackBlitz
Two-way binding is a combination of both property binding and event binding as it is a continuous synchronization of data/values from presentation layer to component and from component to the presentation layer.
Since this is a two way binding we have to use both the brackets - [ ( ) ]. Also ngModel is a directive which is used to bind the data both ways.
In Ionic 5 - The way to get the value of an ion-input value when focusing:
<ion-input (ionFocus)="onFocusPlace($event)"></ion-input>
onFocusPlace(event){
this.value = event.target.value;
}
I am following along this Ionic 2 tutorial and encountered problems. The problems are in the TypeScript (See the Picture). Here is the video tutorial I followed.
Here are the src/pages/home/home.html:
<ion-header>
<ion-navbar primary *navbar>
<ion-title>
Tasker
</ion-title>
<ion-buttons end>
<button ion-button icon-only>
<ion-icon name="add"></ion-icon>
</button>
</ion-buttons>
</ion-navbar>
</ion-header>
<ion-content>
<ion-list>
<ion-item *ngIf="!task.length">
No Task Available
<p> Click <ion-icon name="add"> to add task</ion-icon></p>
</ion-item>
<ion-item-sliding *ngFor="#t of tasks">
<ion-item>
<ion-toggle></ion-toggle>
<ion-label>
<h2 [ngClass]="t.status">{{t.task}}</h2>
<p [ngClass]="t.priority">{{t.priority}}</p>
</ion-label>
</ion-item>
<ion-item-options>
<button primary><ion-icon name="clipboard"></ion-icon>Edit</button>
<button danger><ion-icon name="trash"></ion-icon>Delete</button>
</ion-item-options>
</ion-item-sliding>
</ion-list>
</ion-content>
And the src/pages/home/home.ts Where the error occurred!:
import { Component } from '#angular/core';
import { NavController } from 'ionic-angular';
#Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
static get parameters(){
return [[NavController]]
}
constructor(nav) {
this.nav = nav;
this.tasks = [
{task:'test1', priority:'low', status:'pending'},
{task:'test2', priority:'high', status:'done'},
{task:'test3', priority:'normal', status:'pending'}
]
}
}
There are a few typescript issues I see:
You dont need static get parameters function at all.
If you are injecting NavController, you can specify it like so:
constructor(private nav:NavController) {
//this.nav = nav; This is not required if you have set access
//specifier in constructor parameter
// removed rest of code for brevity
}
Lastly, if you need to create a class variable in Typescript, you need to declare in the class.
export class HomePage {
tasks:any[]=[]
// contstructor and other code
}
Note the reference video seems to be using a much older version of Ionic. I suggest you find a recent tutorial video.
I am facing some problems while displaying the json formatted data in html file. It work successfully but list is not displayed. This in my code...
import { Component } from '#angular/core';
import { Platform } from 'ionic-angular';
import { Hotspot, Network } from 'ionic-native';
#Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
constructor(public platform: Platform){
this.platform = platform
}
List(){
Hotspot.scanWifi().then((networks:Array<Network>)=>{
console.log(networks);
});
}
}
This is my HTML File
<ion-header>
<ion-navbar>
<ion-title>
Ionic Blank
</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<button ion-button color="Primary" (click)="List()">ScanWifi</button>
<div *ngFor="let network of networks">
<ion-list>
<ion-item>
<h2>{{network}}</h2><br>
</ion-item>
</ion-list>
</div>
</ion-content>
You are just console logging your result, your current code:
List(){
Hotspot.scanWifi().then((networks:Array<Network>)=>{
console.log(networks);
});
You need to declare a local variable networks so that you can use it in the view as you have:
So your code should look something like this:
networks;
List(){
Hotspot.scanWifi().then((networks:Array<Network>)=>{
this.networks = networks;
});
so that you can refer to your networks in your view:
<div *ngFor="let network of networks">
EDIT: I first wrongfully "assumed" that Hotspot needed to be injected into the constructor, but by doing some research, I found out that Hotspot is a native element with methods, and can therefore be called just by Hotspot.scanWifi() as per can be seen here.
You have to set networks array in the class
export class HomePage {
networks:any;
constructor(public platform: Platform){
this.platform = platform
}
List(){
Hotspot.scanWifi().then((networks:Array<Network>)=>{
console.log(networks);
this.networks = networks;//or do forEach and push
});
}
}