Ionic2: getting input text field in a page by a component - ionic2

This is my search page where I load results with a for cycle
<ion-header>
<ion-navbar>
<ion-title>Search</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<ion-list>
<ion-item>
<ion-input [(ngModel)]="room_name" type="text"></ion-input>
</ion-item>
<ion-list>
<guide-view *ngFor="let g of guideList" [guide]="g"></guide-view>
</ion-list>
</ion-list>
</ion-content>
My goal is to make available the [(ngModel)]="room_name" for the guideView components:
#Component({
selector: 'guide-view',
template: `
<ion-item>
<ion-thumbnail item-left>
<img src="{{guide.imagePreviewUrl}}">
</ion-thumbnail>
<h2>{{guide.username}} {{message}}</h2>
<p>rate: {{guide.rate}}</p>
<button clear ion-button outline item-right icon-left (click)="engageGuide(guide.username)">
<ion-icon name="arrow-dropright"></ion-icon>
Open Room
</button>
</ion-item>`
})
export class GuideView {
#Input()
guide: Guide;
message : any;
constructor(public navCtrl: NavController, public myService: MyServiceh) {}
engageGuide(guide: Guide): void{
this.myService.openRoom(???room_name???,guide).subscribe((data)=>{
....
}
}
As you can see I need the value of that input text, for call openRoom but I don't know how to take it.

In the search page this row
<guide-view *ngFor="let g of guideList" [guide]="g"></guide-view>
becomes
<guide-view *ngFor="let g of guideList" [guide]="g" [room_name]="room_name"></guide-view>
Then I can take in the compoment the room_name with the following code:
export class GuideView {
#Input()
guide: Guide;
message : any;
#Input('room_name') = myRoom;
constructor(public navCtrl: NavController, public myService: MyServiceh) {}
engageGuide(guide: Guide): void{
this.myService.openRoom(this.myRoom,guide).subscribe((data)=>{
....
}
}

Related

Angular 4 give error as "No value accessor for form control with unspecified name attribute"

I am developing mobile application in ionic 2 with angular 4. I have implemented login page with reactive form previously it is working correctly but while implementing feature as after logout control will redirect to login page. So, I have created sharedModule which I have imported in my app.module.ts file. After this I am getting an below error:
No value accessor for form control with unspecified name attribute
Login.ts
constructor(public navCtrl: NavController, public navParams: NavParams,
private auth: AuthServiceProvider, private alertCtrl: AlertController,
private loadingCtrl: LoadingController, public storage: Storage,
private fb: FormBuilder) {
this.loginForm = this.fb.group({
'dashboardUsername': [null, Validators.required],
'dashboardPassword': [null, Validators.required]
})
}
Login.html
<form [formGroup]="loginForm" (ngSubmit)="login(loginForm.value)">
<ion-row class="htm-container">
<ion-col>
<ion-list inset>
<ion-item class="inputRounded" [class.error]="!loginForm.controls['dashboardUsername'].valid && loginForm.controls['dashboardUsername'].touched">
<ion-input type="text" placeholder="Dashboard username" [formControl]="loginForm.controls['dashboardUsername']" name="dashboardUsername"></ion-input>
</ion-item>
<div class="htm-error" *ngIf="loginForm.controls['dashboardUsername'].hasError('required') && loginForm.controls['dashboardUsername'].touched">
<p>Username is required!</p>
</div>
<ion-item class="inputRounded" [class.error]="!loginForm.controls['dashboardPassword'].valid && loginForm.controls['dashboardPassword'].touched">
<ion-input type="password" placeholder="Dashboard password"
[formControl]="loginForm.controls['dashboardPassword']" name="dashboardPassword"></ion-input>
</ion-item>
<div class="htm-error" *ngIf="loginForm.controls['dashboardPassword'].hasError('required') &&
loginForm.controls['dashboardPassword'].touched">
<p>Password is required!</p>
</div>
</ion-list>
</ion-col>
</ion-row>
<ion-row>
<ion-col class="signup-col">
<button ion-button color="light" class="submit-btn btn-bottom-margin" full type="submit"
[disabled]="!loginForm.valid">Sign In
</button>
</ion-col>
</ion-row>
</form>
Third party controls such as yours require ControlValueAccessor to function with angular forms otherwise they behave like native elements and can use DefaultValueAccessor. in such cases you should use ngDefaultControl attribute.
In your case
<ion-input type="text" placeholder="Dashboard username"
ngDefaultControl
[formControl]="loginForm.controls['dashboardUsername']" name="dashboardUsername">
Should fix that for you.
You cannot use formControl and name at same time.
If you want a name attribute than you may write as:
<ion-input type="password" placeholder="Dashboard password"
[formControl]="loginForm.controls['dashboardPassword']" [attr.name]="dashboardPassword"></ion-input>

I want to add dynamic images in card in ionic

I am having dynamic cards in my ionic project and I want to add dynamic images for different cards.
this is my .html code:
<ion-header>
<ion-navbar>
<button ion-button menuToggle>
<ion-icon name="menu"></ion-icon>
</button>
<ion-title *ngFor="let file_uri of row"><p>{{file-uri.name}}</p></ion-title>
</ion-navbar>
</ion-header>
<ion-content class="cards-bg social-cards">
<ion-card *ngFor="let uri of card">
<p ion-button color="light" clear>{{uri.myurl}}hi</p>
<ion-item (click)="OpenContentPage()">
<ion-avatar item-start>
<img src="{{uri.myurl}}">
<p>{{uri.myurl}}</p>
</ion-avatar>
<h2>Marty McFly</h2>
<p>November 5, 1955</p>
</ion-item>
<img src="{{uri.myurl}}" (click)="OpenContentPage()">
<ion-card-content (click)="OpenContentPage()">
<p>hello</p>
</ion-card-content>
</ion-card>
</ion-content>
this is my .ts code:
card: Array<any>; //array of arrays
constructor(public nav: NavController, public navParams: NavParams) {
var temp1 = [{myurl: 'assets/img/advance-card-bttf.png', code: 'i am gandhar'},
];
//console.log(this.navParams.get("temp1"));
this.card = [];
this.card.push(temp1);
this.card.push(temp1);
console.log(this.card);
}
It's giving me dynamic cards but, it is not displaying image and data from object.
Can anyone help?
Remove this brackets [] and it will display image and data. Try like this:
var temp1 = {myurl: 'assets/img/advance-card-bttf.png', code: 'i am gandhar'};

Ionic2 [(ngModel)] freezes ionic if ion-toggle is in modal

I have this code for an <ion-toggle> in a modal page but when I go to the page it freezes Ionic and I need to shut it down to get it working again. When I leave the binding out, the <ion-toggle> is displayed correct. On the same page is a form that is using ngModel.
<ion-item>
<ion-label>public</ion-label>
<ion-toggle (ionChange)="togglePublic()" [(ngModel)]="newComment.public"></ion-toggle>
</ion-item>
Sombody an idea what the problem can be?
The full html .
<ion-content padding>
<ng-container *ngIf="timer">
<ng-container *ngIf="addingComment">
<ion-card-header text-center class="new-comment">
{{newComment.author}}
</ion-card-header>
<ion-card-content>
<form [formGroup]="commentGroup">
<ion-textarea placeholder="" clearInput formControlName="comment" [(ngModel)]="newComment.message"></ion-textarea>
<ion-item *ngIf="commentGroup.controls['comment'].hasError('minlength') && commentGroup.controls.comment.touched" class="invalid">
<p>The comment needs to be at least 4 characters</p>
</ion-item>
<ion-item *ngIf="commentGroup.controls['comment'].hasError('maxlength') && commentGroup.controls.comment.touched" class="invalid">
<p>The max lengt is 140 characters</p>
</ion-item>
<ion-item *ngIf="commentGroup.controls['comment'].hasError('required') && commentGroup.controls.comment.touched" class="invalid">
<p>A comment is required!</p>
</ion-item>
</form>
<ion-item>
<ion-label>public</ion-label>
<ion-toggle (ionChange)="togglePublic()" [(ngModel)]="newComment.public"></ion-toggle>
</ion-item>
<p class="text-center">{{sToTime(newComment.time)}}</p>
<ion-buttons end>
<button (tap)="cancelComment()" color="danger" ion-button small>cancel</button>
<button (tap)="postComment()" ion-button small>post</button>
</ion-buttons>
</ion-card-content>
</ng-container>
<ion-card *ngFor="let comment of commentsToDisplay" class="comment ">
<ng-container *ngIf="!comment.remove && !comment.addComment">
<ion-card-header class="text-center">
{{comment.author}}
</ion-card-header>
<ion-card-content>
<p>{{comment.message}}</p>
<p class="text-center">{{sToTime(comment.time)}}</p>
</ion-card-content>
</ng-container>
<ng-container *ngIf="comment.remove && !comment.addComment">
<div class="fadeout">
<ion-card-header class="text-center">
{{comment.author}}
</ion-card-header>
<ion-card-content>
<p>{{comment.message}}</p>
<p class="text-center">{{sToTime(comment.time)}}</p>
</ion-card-content>
</div>
</ng-container>
</ion-card>
</ng-container>
</ion-content>
And here is the TS constructor where the this.newComment.public to bind is defined in.
constructor(public viewCtrl: ViewController, public navParams: NavParams, public authService: AuthService, public commentData: CommentData) {
this.isSerie = navParams.get('isSerie');
this.media = navParams.get('media');
this.comments = [];
this.commentsToDisplay = [];
this.commentGroup = new FormGroup({ comment: new FormControl('', Validators.compose([Validators.required, Validators.minLength(4), Validators.maxLength(140)])) });
this.forwardingTimer = Observable.timer(0, 250);
this.newComment = {
message: '',
author: this.authService.currentUser.user_name,
time: this.originalTime,
public: true
}
}

ionic2 toggle in navbar use appropriately

I am trying to use toggle in my navbar to switch languages between English and German.
<button ion-button menuToggle>
<ion-icon name="menu"></ion-icon>
</button>
<ion-title>{{ 'CATALOGUE' | translate }}</ion-title>
<ion-buttons end>
<ion-list>
<ion-item>
<ion-toggle [(ngModel)]="language"></ion-toggle>
</ion-item>
</ion-list>
</ion-buttons>
This basically looks ugly. What's the correct way of using such toggle button in navbar?
You can do something like
html
<ion-header>
<ion-navbar>
<ion-title>
Stackoverflow
</ion-title>
<ion-buttons end>
<button ion-button (click)="toggleClick()">
<ion-toggle #autoToggle [(ngModel)]="autoRefresh" checked="true"></ion-toggle>
</button>
</ion-buttons>
</ion-navbar>
</ion-header>
ts
import { Component, ViewChild } from '#angular/core';
import { NavController, Toggle } from 'ionic-angular';
#Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
autoRefresh = true;
#ViewChild('autoToggle') autoToggle: Toggle;
constructor() {}
toggleClick() {
this.autoToggle.checked = !this.autoToggle.checked;
}
}
I know this is too late but hope it helps anyone with similar problem.
I'm using ionic 3 and this thing worked as intended for me
Using toggle button in navbar:
<ion-buttons end>
<ion-toggle (ionChange)="onToggle($event)" [(ngModel)]="language"></ion-toggle> // ionChange event will fire every time when you change the toggle state
</ion-buttons>
If putting it inside <ion-buttons end></ion-buttons> doesn't work try using <ion-buttons right></ion-buttons instead. Get <ion-toggle></ion-toggle> from the ion-list and ion-item because they have white background as default, put it inside the ion-buttons.
You can also make the ion-item's background to transparent by adding a class to it and do some css styling or inline styling.

Menu component not showing up

I am struggling to add a 'burger' menu into the blank ionic2 template. Not sure what am doing wrong here but all I have done is generate a blank ionic template, change template string to templateUrl in the app.ts and paste code into app.html. Am not getting any console errors.
app.ts:
import {Component} from '#angular/core';
import {Platform, ionicBootstrap} from 'ionic-angular';
import {StatusBar} from 'ionic-native';
import {HomePage} from './pages/home/home';
#Component({
templateUrl: 'build/app.html'
})
export class MyApp {
rootPage: any = HomePage;
constructor(platform: Platform) {
platform.ready().then(() => {
// Okay, so the platform is ready and our plugins are available.
// Here you can do any higher level native things you might need.
StatusBar.styleDefault();
});
}
}
ionicBootstrap(MyApp);
app.html:
<ion-menu [content]="content">
<ion-toolbar>
<ion-title>Pages</ion-title>
</ion-toolbar>
<ion-content>
<ion-list>
<button ion-item (click)="openPage(loginPage)">
Login
</button>
<button ion-item (click)="openPage(signupPage)">
Signup
</button>
</ion-list>
</ion-content>
</ion-menu>
<ion-nav [root]="rootPage"></ion-nav>
I was missing the button
<button right menuToggle>
<ion-icon name="menu"></ion-icon>
</button>
From home.html
<ion-navbar *navbar>
<ion-title>
Blank Starter
</ion-title>
<button right menuToggle>
<ion-icon name="menu"></ion-icon>
</button>
</ion-navbar>
<ion-content class="home">
<h1 text-center>Content goes here!</h1>
</ion-content>