Passing Values between two components in Angular

Question

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?

Answer 1

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.

Answer 2

You have two alternatives:

1. You can use a singleton service:

@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) { }
}

2. You have to use the parent component as a data-bridge

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())
  }
}