i am building the child component byngFir loop and when the ngselect inside that is selected and teh confirm button is presses from parent component then it should call the child component method but it show call a undefiend error
this is lines in parent component where is making it @ViewChild(DropdownsComponent) child : DropdownsComponent i also tried
@ViewChild('child')
child : DropdownsComponent
and in html
<app-dropdowns #child class="col" [listdata]="item"></app-dropdowns>
but it shows error that calling a undefined and also tried these Angular 2 viewchild not working - cannot read property nativeElement of undefinedi also tried this also tried this
here is the parent component
import { DropdownsComponent } from '../dropdowns/dropdowns.component';
import {Component, OnInit, TemplateRef, ViewChild} from '@angular/core';
import {Router, ActivatedRoute, ParamMap} from '@angular/router';
declare var swal : any;
import {Observable} from 'rxjs/Observable';
import 'rxjs/add/operator/switchMap';
import {BsModalService} from 'ngx-bootstrap/modal';
import {BsModalRef} from 'ngx-bootstrap/modal/bs-modal-ref.service';
import {ProductsService} from './products.service';
@Component({
selector: 'app-products',
templateUrl: './products.component.html',
styleUrls: ['./products.component.scss'],
})
export class ProductsComponent implements OnInit {
public items : Array < String >= []
public slotitems : Array < String >= []
today = Date.now();
public products$
modalRef : BsModalRef;
modalRef2 : BsModalRef;
modalref3 : BsModalRef;
popupproduct
modalimage
modaldata
productData
dynamicNgselect
list
swtich1 = true
templated
@ViewChild(DropdownsComponent)
child : DropdownsComponent
constructor(private modalService : BsModalService, private route :
ActivatedRoute, private router : Router, private service : ProductsService)
{}
ngOnInit() {
this.slotitems = ['8:00 am to 10:00 am', '10:00 am to 12:00 pm', '2:00 am
to 4:00 pm', '4:00 am to 6:00 pm']
this
.service
.getposition()
.subscribe(data => this.products$ = data, err => {
// Log errors if any
console.log(err);
this
.router
.navigate(['/OnlineOrder'])
}, () => {
if (!this.products$) {
this
.router
.navigate(['/onlineOrder'])
}
console.log("Nothing here", this.products$)
});
this
.service
.getposition()
.subscribe(data => this.popupproduct = data, err => {
// Log errors if any
console.log(err);
}, () => {
console.log("helloasdasd", this.popupproduct)
});
}
addcart(datacoming : any, template : TemplateRef < any >, template2 :
TemplateRef < any >, template3 : TemplateRef < any >) {
this.productData = null;
this.list = null;
this.templated = template3
let someDate = new Date(this.today);
var numberOfDaysToAdd = 1;
for (let i = 0; i < 4; i++) {
var dd = someDate.getDate() + i;
var mm = someDate.getMonth();
var y = someDate.getFullYear();
var someFormattedDate = dd + '-' + mm + '-' + y + ' ₹' + datacoming.opr + '/kg';
this
.items
.push(someFormattedDate);
}
this
.service
.setidofproduct(datacoming.i._id);
console.log("jol", datacoming);
this
.service
.getproduct()
.subscribe((data) => this.productData = data, err => console.log(err), () => {
this
.modalRef
.hide();
this.modalRef2 = this
.modalService
.show(template);
console.log("helloasdasd", this.productData);
})
this.modalRef = this
.modalService
.show(template2);
console.log("here is data", datacoming);
this.modaldata = datacoming;
}
private value : any = {};
public selected(value : any) : void {
this.list = this.productData.meatItem.ma
this.swtich1 = true
console.log('Selected value is: ', this.swtich1);
}
public refreshValue(value : any) : void {
this.value = value;
this.swtich1 = true
}
showAlert2() {
swal('Added to Cart', '', 'success')
}
productSaveInCart() {
this
.modalRef2
.hide();
this.modalref3 = this
.modalService
.show(this.templated);
}
selectedslot(value) {
this
.modalref3
.hide();
this.showAlert2();
this
.child
.sendvalues();
this
.child
.sendvalues();
}
}
here is the parent component HTML
<div fxLayout="column wrap" fxLayout.gt-md="row wrap" fxLayoutAlign="center">
<mat-card *ngFor="let product of products$ ">
<img mat-card-image [src]="product.i.t || '../../assets/images/noimage.png'" [alt]="product.i.i">
<mat-card-footer class="row">
<button type="button" class="col-sm-7 matbuton2 align-self-start" mat-button>
{{product.i.i}}
</button>
<button type="button" class="col-sm-2 offset-md-4 matbuton align-self-end " mat-button>
₹{{product.opr}}/kg
</button>
<fa class="col-sm-2" [name]="'cart-plus'" (click)="addcart(product,template,template2,template3)" [size]=2></fa>
</mat-card-footer>
</mat-card>
</div>
<ng-template #template>
<div class="modal-header">
<h4 class="modal-title pull-left"></h4>
<button type="button" class="close btn pull-right" aria-label="Close" (click)="modalRef2.hide()">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<mat-card style="margin: 0; ">
<img height="400px" style="width: 110%" mat-card-image [src]="modaldata.i.t || '../../assets/images/noimage.png'">
<mat-card-footer class="row">
<h4>Extra prep. time: 1hr</h4>
<ng-select [allowClear]="true" [items]="items" [disabled]="disabled" (data)="refreshValue($event)" (selected)="selected($event)"
(removed)="removed($event)" (typed)="typed($event)" placeholder="No Date selcted">
</ng-select>
<div *ngFor="let item of list ">
<h4 class="col">{{item.n}}</h4>
<app-dropdowns #child class="col" [listdata]="item"></app-dropdowns>
</div>
<button (click)="productSaveInCart()" type="button" class="col matbuton " mat-button>
ADD to Cart
</button>
</mat-card-footer>
</mat-card>
</div>
</ng-template>
<ng-template #template2>
<div class="modal-dialog modal-sm">
<div class="modal-header" style="width: 30px">
<h2 class="modal-title pull-left"></h2>
<fa class="col " [name]="'spinner'" [spin]="true" (click)="addcart(product,template,template2)" [size]=3></fa>
</div>
</div>
</ng-template>
<ng-template #template3>
<div class="modal-header">
<h4 class="modal-title pull-left"></h4>
<button type="button" class="close btn pull-right" aria-label="Close" (click)="modalRef2.hide()">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<mat-card style="margin: 0; ">
<ng-select [allowClear]="true" [items]="slotitems" [disabled]="disabled" (data)="refreshValue($event)" (selected)="selectedslot($event)"
(removed)="removed($event)" (typed)="typed($event)" placeholder="No Date selcted">
</ng-select>
</mat-card>
</div>
</ng-template>
And here is the Child component
import {Component, Input, OnInit} from '@angular/core';
import {MatProgressBarModule} from '@angular/material';
@Component({selector: 'app-dropdowns', templateUrl:
'./dropdowns.component.html', styleUrls: ['./dropdowns.component.scss']})
export class DropdownsComponent implements OnInit {
@Input()listdata : any;
list : any
constructor() {}
private value : any = {};
public items : Array < string > = [];
ngOnInit() {
this.list = this.listdata.op
this
.list
.map(data => {
if (data.pd == 0) {
this
.items
.push(data.n);
return data.n
} else {
this
.items
.push(data.n + ' ₹' + data.pd);
return data.n + ' ₹' + data.pd;
}
});
console.log("Listdata", this.list);
this.value.text = 'asdgjasgd'
}
private _disabledV : string = '0';
private disabled : boolean = false;
private get disabledV() : string {return this._disabledV;}
private set disabledV(value : string) {
this._disabledV = value;
this.disabled = this._disabledV === '1';
}
public selected(value : any) : void {
console.log('Selected value is: ', value);
}
public removed(value : any) : void {
console.log('Removed value is: ', value);
}
public typed(value : any) : void {
console.log('New search input: ', value);
}
public refreshValue(value : any) : void {
this.value = value;
}
public sendvalues() {
console.log("HEllllllllllllllloooooooooooooooooooooooo");
}
}
