I want to add a string variable from ionic/storage to html.
home.ts
export class HomePage {
#ViewChild('username') uname;
constructor(public navCtrl: NavController, public alertCtrl: AlertController, public strg: Storage) {
}
signIn() {
this.strg.set('uname', this.uname.value);
this.navCtrl.push(Page1Page);
}
}
page1.html
<ion-content padding>
<p>Welcome to this app, /**I want to add the uname here**/ </p>
</ion-content>
How would I go about assigning the string from ionic/storage using the page1.ts?
You can simply fetch your username from #ionic/storage again like this:
page1.ts
username: string;
constructor(public strg: Storage) {
this.username = this.strg.get('uname');
}
page1.html
<ion-content padding>
<p>Welcome to this app, {{username}}</p>
</ion-content>
This {{username}} expression is called One-Way-Data-Binding. So every time you change
the username variable in your Page1Page class, the template page1.html will automatically update.
Related
I've written a custom component to handle my ion-header as all I need to change per page is the title. However, the title is not displaying as the component doesn't seem to be getting the property from the app page.
Component Template
<ion-header>
<ion-toolbar color="primary">
<ion-buttons slot="start">
<ion-menu-button></ion-menu-button>
</ion-buttons>
<ion-title> {{title}} </ion-title>
Component Typescript
import { Component, OnInit, Input } from '#angular/core';
#Component({
selector: 'app-custom-toolbar',
templateUrl: './custom-toolbar.component.html',
styleUrls: ['./custom-toolbar.component.scss'],
})
export class CustomToolbarComponent implements OnInit {
#Input() title: any;
constructor() { }
ngOnInit() {
}
}
App Page Template
<app-custom-toolbar [title]="Dashboard"></app-custom-toolbar>
You need to declare #Input() title in your custom component to pass value from parent into it like -
Child Component
...
...
#Input() title: any;
...
...
Parent Component HTML -
<child-component [title]="somePropertyInParentComponent"></child-component>
Edit: According to your updated question . Try removing [] from the title property in parent component
As Pawan Sharma says, you need to declare an #Input,
In this link you can find more information about it.
https://victorroblesweb.es/2016/11/07/input-output-angular-2/
Typescript
import { Component, OnInit, Input } from '#angular/core';
import { NavController } from '#ionic/angular';
#Component({
selector: 'app-footertoolbar',
templateUrl: './footertoolbar.page.html',
})
export class FooterToolbarPage implements OnInit {
#Input() public activeIndex:number;
constructor(private navCtrl: NavController) { }
ngOnInit() {}
public GoToPage() { console.log(this.activeIndex); }
}
HTML
<ion-toolbar color="dark">
<ion-buttons class="sidemargin" slot="secondary">
<ion-button (click)="GoToPage()"></ion-button>
</ion-buttons>
</ion-toolbar>
HTML of the component that use the component
<app-footertoolbar [activeIndex]="0" >
</app-footertoolbar>
Reposting my comment as requested:
I think if you have the [] around it then to pass a string back you would need "'dashboard'" (so a " with a ' inside it).
i want to passing ID that i stored it in Firestore database from page to another page in my Ionic4 App
i have news app that i retrieved the contents from firestore and i want when i click on the news it must show the details in details page
my code in briefly :
news.page.html
<ion-content padding>
<ion-item *ngFor=" let count of data">
<h5>{{count.title}}<ion-button (click)="goToDetail()">click for details</ion-button>
<img src="{{count.image}}">
</h5>
</ion-item>
news.page.ts
export class FilmsPage implements OnInit {
data: any;
constructor(public db: AngularFirestore, private router: Router) { }
ngOnInit() {
this.getAllPosts().subscribe((data) => {
this.data = data;
console.log(data);
});
}
getAllPosts(): Observable<any> {
return this.db.collection<any>('123').valueChanges ();
}
goToDetail() {
this.router.navigateByUrl('/details/{{count.id}}');
}
}
details.page.ts
export class DetailsPage implements OnInit {
id: string;
constructor(private router: ActivatedRoute, private afs: AngularFirestore) {
}
ngOnInit() {
this.id = this.router.snapshot.paramMap.get('id');
console.log(this.id);
}
}
details.page.html
<ion-content padding>
{{id}}
</ion-content>
but when i run this code its just showed {{count.id}} in details.page.html .. why??? can somone solve this probllem please
If the details.page is to be view in modal then I think you can you can pass the data to the ModalController to view the new
The best solution is to use a ModalController to pass the single news data to the details.page.
After setting back button text using config,
it does not reflect right away in nav bar.
Have to pop and push the page again.
playground:
https://stackblitz.com/edit/backbuttonbug.
you can see in contact page,
setting back button text does not reflect in self page and even in other nav stack
code:
previous page:
export class AboutPage {
constructor(public navCtrl: NavController) {}
contact() {
this.navCtrl.push(ContactPage);
}
}
Next page:
export class ContactPage {
constructor(public navCtrl: NavController,
public config: Config) {}
toChinese() {
this.config.set("backButtonText", '返回');
}
toEnglish() {
this.config.set("backButtonText", 'back');
}
}
<ion-header>
<ion-navbar>
<ion-title>
Contact
</ion-title>
</ion-navbar>
</ion-header>
<ion-content>
<button ion-button (tap)="toChinese()">toChinese</button>
<button ion-button (tap)="toEnglish()">toEnglish</button>
</ion-content>
I suspect this is a bug and have opened a issue:
https://github.com/ionic-team/ionic-v3/issues/976.
and find another issue similar:
https://github.com/ionic-team/ionic/issues/7043
is that a ionic bug / my program bug?
hope to see advice
You haven't added any code so I'm not 100% sure of what you've tried already but try this:
import { ViewController } from 'ionic-angular';
...
ionViewDidEnter() {
this.viewCtrl.setBackButtonText('Some dynamic button text');
}
Edit
Sorry didn't see your Stackblitz example, this works:
import { Component } from '#angular/core';
import { NavController, Config, ViewController } from 'ionic-angular';
#Component({
selector: 'page-contact',
templateUrl: 'contact.html'
})
export class ContactPage {
constructor(public navCtrl: NavController,
public config: Config,
private viewCtrl: ViewController) {
}
toChinese() {
this.viewCtrl.setBackButtonText('返回');
}
toEnglish() {
this.viewCtrl.setBackButtonText('Back');
}
}
I am trying to follow the instructions on https://ionicacademy.com/http-calls-ionic/ and when I convert the call to my service (https://www.oakwoodnb.com/json/events.php), I am able to log the data to the console, but it won't display on screen. Any idea why?
Here is my code:
api.ts
#Injectable()
export class ApiProvider {
constructor(public http: HttpClient) {
console.log('Hello ApiProvider Provider');
}
getVerses() {
return this.http.get('https://www.oakwoodnb.com/json/events.php');
}
daily-verse.ts
export class DailyVersePage {
//Added to retrieve verses
verses: Observable<any>;
constructor(public navCtrl: NavController, public navParams: NavParams, public apiProvider: ApiProvider) {
//Is this a race condition?
this.verses = this.apiProvider.getVerses();
this.verses
.subscribe(data => {
console.log('my data: ', data);
})
}
daily-verse.html
<ion-list>
<p ion-item *ngFor="let verse of (verses | async)?.results">
Title: {{ verse.title }}
</p>
</ion-list>
The API I am calling does fail unless I have the CORS Chrome Extension enabled, but it does log to console when I have it turned on.
I figured out the answer. Posting it for those that may get stuck like I was.
I changed
<p ion-item *ngFor="let verse of (verses | async)?.results">
to
<p ion-item *ngFor="let verse of (verses | async)?.items">
because the data returns in the first element as "items" instead of "results" in the API.
I'm getting " Error: InvalidPipeArgument: '[object Object]' for pipe 'AsyncPipe' " when running the following code.
html template:
<ion-list>
<ion-item-sliding *ngFor="let item of shoppingItems | async">
<ion-item>
{{ item.$value }}
</ion-item>
<ion-item-options side="right">
<button ion-button color="danger" icon-only (click)="removeItem(item.$key)"><ion-icon name="trash"></ion-icon></button>
</ion-item-options>
</ion-item-sliding>
</ion-list>
page ts:
shoppingItems: AngularFireList<any>;
constructor(public navCtrl: NavController, public firebaseProvider: FirebaseProvider) {
this.shoppingItems = this.firebaseProvider.getShoppingItems();
}
firebase provider
constructor(public afd: AngularFireDatabase) {
console.log('Hello FirebaseProvider Provider');
console.log("Shopping items"+afd.list('/shoppingItems/'))
}
getShoppingItems() {
console.log("Shopping items"+this.afd.list('/shoppingItems/'))
return this.afd.list('/shoppingItems/');
}
addItem(name) {
this.afd.list('/shoppingItems/').push(name);
}
firebase db
shoppingItems
-KxmiUt64GJsPT84LQsI: "qwerty"
-KxmifqyfD41tRPwFh07: "key"
From the web app I was able to add items to firebase db. But I wasn't able to render the data from firebase. I am getting the above mentioned error.
Thanks in advance for your help.
AngularFire2 V5
this.afd.list('/shoppingItems/') does not return an asynchronous observable which is supposed to work with async pipe. It returns a reference to the List in the real-time database.
You need to use valueChanges() to return that.
In your provider return the observable,
getShoppingItems() {
console.log("Shopping items"+this.afd.list('/shoppingItems/'))
return this.afd.list('/shoppingItems/').valueChanges();//here
}
If you are accessing through $key/$value,
Check the upgrade details for angularfire2 v4 to 5. This is because FirebaseList is deprecated and AngularFireList is now returned from version 5.
Calling .valueChanges() returns an Observable without any metadata. If you are already persisting the key as a property then you are fine. However, if you are relying on $key, then you need to use .snapshotChanges()
You need to use snapshotChanges()
getShoppingItems() {
console.log("Shopping items"+this.afd.list('/shoppingItems/'))
return this.afd.list('/shoppingItems/').snapshotChanges();//here
}
To access $key or $value in html,
use item.payload.key and item.payload.val()
Add ionViewDidLoad life cycle in the home.ts file and instead of constructor load your item in ionViewDidLoad , replace your constructor with below code
constructor(public navCtrl: NavController, public firebaseProvider: FirebaseProvider) {
}
ionViewDidLoad() {
this.shoppingItems = this.firebaseProvider.getShoppingItems();
console.log(this.shoppingItems);
}
Import at page.ts
import { Component } from '#angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { AngularFireDatabase} from 'angularfire2/database';
import { Observable } from "rxjs/Observable";
import { ShoppingItem } from '../../model/shoppingitem';
import your provider the right way from your provider
import { FirebaseProvider } from '../../providers/firebase/firebase';
export class Page {
shoppingItems:Observable<ShoppingItem[]>;
constructor(public navCtrl: NavController,
public firebaseProvider: FirebaseProvider) {
this.shoppingItems=this.firebaseProvider
.getShoppingItem()
.snapshotChanges()
.map(
changes=>{
return changes.map(c=>({
key:c.payload.key, ...c.payload.val(),
}));
}
);
}
}
}
firebaseProvider
note the 'shopping-list' is the table at the firebase database
private itemListRef = this.afDatabase.list<ShoppingItem>('shopping-list');
constructor(private afDatabase: AngularFireDatabase) {}
.getShoppingItem(){
return this.itemListRef;
}
}
Your shoppingitem model
export interface ShoppingItem{
key?:string;
}