0

I have two component. alert-component and master component.

Now I want to use master-component variable into alert component.

But without import it because in master-component I have already import alert-component.

And again if I try to import master-component into alert-component then it will throw circular dependency error.

So I want to access variable of master-component into alert-component without import it.

So its possible?

Harshil Ramani
  • 1
  • 1
    https://angular.io/guide/component-interaction If you already are importing alert-component into the master component, and you need to use a variable in both, why don't you just create the variable/move the function/functionality into the alert component? Or, break it down further into an entirely new component? These circular import situations hint to an inherently flawed/bad design to begin with, so maybe reconsider your design? – boog Oct 09 '22 at 07:51
  • also, if you're trying to access a variable from the master component in the alert component and are already importing alert into master, why don't you call a function from the alert component and pass the variable from master over to alert as an argument to use it? – boog Oct 09 '22 at 07:57
  • Ok that's fine, but can you please explain how to pass variable using function between 2 components. In master component i have variable - > isValid : false; and i want to use this variable into alert component and set the status -> if(response.isSuccess){ isVlaid : true; }, Can you help ? – Harshil Ramani Oct 10 '22 at 07:28

2 Answers2

0

You could use an @Input() variable for your alert component and forward it within your master component. In the Master Component's template, inject the alert component and forward the input with square brackets:

// master.component.html
...
    <alert-component [alertInput1]="masterVariable1"></alert-component>
...

In the master component's controller, have the variable defined, that you want to forward to the child component:

// master.component.ts
{
    ...
    public masterVariable1: string = "test content from master";
    ...
}

In the child component's controller, define the input variable:

// alert.component.ts
{
    ...
    @Input() alertInput1: string = undefined; // alertInput1 will get the value "test content from master"
    ...
}

Further reading about input/output binding between parent and child components: https://angular.io/guide/inputs-outputs

Update: If your alert component is no child of the master component, then a service can be used to share data between them.

Here is the implementation of a new service, that holds a boolean variable inside an BehaviourSubject:

// share-service.ts
@Injectable()
export class ShareService {

    public isValid$: BehaviourSubject<boolean> = new BehaviourSubject<boolean>(false);

    constructor() {}

    public setValid(value: boolean): void {
        this.isValid$.next(value);
    }
}

I did not get, if your MasterComponent shall forward the data to the AlertComponent or vide versa, so in the following example, the MasterComponent updates the isValid of the ShareService, and the AlertComponent receives it.

Now, the master component can inject the service and update the value for the behavioursubject. For showcase, I update it inside the OnInit method, but you can use it anywhere, where suitable:

// master.component.ts
export class MasterComponent implements OnInit {
    constructor(private shareService: ShareService) {}

    ngOnInit(): void {
        this.shareService.setValid(true); // update valid to true
    }
}

Now, the AlertComponent can also inject the same service and listen on the behaviourSubject for updates:

// alert.component.ts
export class AlertComponent implements OnInit {
    constructor(private shareService: ShareService) {}

    public ngOnInit(): void {
        this.shareService.isValid$.subscribe(isValid => {
            if (isValid) {
                // insert code for isValid === true
            } else {
                // insert code for isValid === false
            }
        });
    }
}
MojioMS
  • 1,583
  • 4
  • 17
  • 42
  • Ok that's fine, but can you please explain how to pass variable using function between 2 components. In master component i have variable - > isValid : false; and i want to use this variable into alert component and set the status -> if(response.isSuccess){ isVlaid : true; }, Can you help ? – Harshil Ramani Oct 10 '22 at 11:37
  • Ok, i updated the answer for your scenario. You must make use of a service between your two components. – MojioMS Oct 10 '22 at 12:35
0

If you have the alert component and master component without having any relationship like father and child component. You would use services

First create a service in your project directory.

ng generate service passVariable

This generate two files. In the ts where the magic works you must to generate a new variable.

variable: any;

Then you must to generate a getter and a setter

getVariable(): any{
   return this.variable
}
setVariable(newVariable: any): void{
   this.variable = newVariable;
}

with this you must to use this services in the two component that you want to get and catch the value

In the master component. Inside the constructor you create a private variable with the type of service in the two components.

constructor(private variableService: PassVariable){}

The first in the masterComponent use

this.variableService.setVariable(variableCatch)

Second in the alertComponent use the getVariable() of the service

David Molina
  • 31
  • 7