I am trying to pass values from one component to other components, so far i have refereed some tuts and created my code but still facing issue.
I have following code in my SelectComponent.ts
export class SelectComponent implements OnInit {
user: LoginUser
selectLicences = [
{ name: 'Control', id: 1, isChecked: false, quantity: 1 },
{ name: 'Complete', id: 2, isChecked: false, quantity: 1 },
]
ControlQuantity=10
CompleteQuantity=20
i want to access ControlQuantity and CompleteQuanitiy in my other "buyerComponent"
here is buyerComponent.ts
export class BuyerComponent implements OnInit, OnDestroy,AfterViewInit {
@ViewChild('selectProducts', { read: SelectComponent, static: false })
selectProducts: SelectComponent
CompleteQuantity:number
ControlQuantity:number
ngOnInit() {
this.CompleteQuantity=this.selectProducts.CompleteQuantity
this.ControlQuantity=this.selectProducts.ControlQuantitity
}
}
stackblitz link: https://stackblitz.com/edit/angular-ivy-umje3g ?
You have two alternatives:
@Injectable({providedIn: 'root'})
export class SharedService {
sharedValue = 1
}
@Component({…})
export class Component1 implements OnInit {
public get prop(): number {
return this.service.sharedValue;
}
constructor(private service: SharedService) { }
}
@Component({…})
export class Component2 implements OnInit {
public get prop(): number {
return this.service.sharedValue;
}
constructor(private service: SharedService) { }
}
The parent (bridge component)
Note that the parent is not doing a lot of stuff but providing bindings between the shared data between children.
<div>
<app-child1
[value]="value"
(valueUpdated)="onChangeValueFromChildren($event)">
</app-child1>
<app-child2
[value]="value"
(valueUpdated)="onChangeValueFromChildren($event)">
</app-child2>
</div>
@Component({…})
export class ParentComponent implements OnInit {
value = 2
onChangeValueFromChildren(newValue: number) {
this.value = newValue
}
}
Any of the children components
@Component({…})
export class Child1 implements OnInit {
@Output valueUpdated = new EventEmitter<number>();
onClick() {
this.valueUpdated.next(Math.random())
}
}
You can refer to the official documentation. https://angular.io/guide/inputs-outputs#sending-data-to-a-child-component
You can pass data to your child component via @Input() decorator.
export class buyerComponent implements OnInit{
@Input() CompleteQuantity:number
@Input() ControlQuantity:number
ngOnInit() {
this.CompleteQuantity=this.selectProducts.CompleteQuantity
this.ControlQuantity=this.selectProducts.ControlQuantitity
}
}
In your HTML page, you can pass data via the child component's selector tag.
Update: After seeing the code.
In AppModule, remove the BuyerComponent and Products components from Import and add them to the declaration array.
In Buyer.component.html the tag is incorrect. Correct tag is "app-products" instead of "app-select-products".
Add these as @Input() in the products component class
@Input() CompleteQuantity:number @Input() ControlQuantity:number
Rename the existing Output() variables to another name in the products.component.ts class.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.