How to use ngx-color-picker to change some buttons color in another component?-CodePudding

I am fairly new to Angular. I want to select and save a colour value from "app/settings/components/colour-theme-card", then pass this colour value to another component "app/public-unit/components/unit-filter". I use ngx-color-picker on this project, and "(colorPickerClose)="pickColor($event)" gives me the colour value. What is the best way to pass this value to "app/public-unit/components/unit-filter" file, then update the button colour with the new colour value?

I have read some documents about Angular services and directives. Which one is better in my case?

CodePudding user response：

Ok for this you will need to learn the concepts of @Input and @Otput. Please take a look at this document https://angular.io/guide/inputs-outputs

basically you can have binding going one way in, one way out or two way.

the syntax for one way binding, going from parent component to child component is []

for the opposite, going from the child to the parent is ()

and for two way binding is [()]

I created this to help you understand the concept

https://stackblitz.com/edit/angular-ivy-ofwqxv

there are two components MyColorPickerComponent that uses ngx-color-picker to pick colors. This component has one parameter named color, this parameter is both an input and an output (note that for two way binding to work, the output name must be <name of parameter>Change)

and there is also YourOtherComponent that uses MyColorPickerComponent

I created 3 different options showing the difference between the binding types

the first one is one way out
the second one way in
and the third is two way, in and out

Feel free to ask any questions.

CodePudding user response：

I created a simple example for you using @Input() to send selectedColor from Component 1 -> Other Component where Other Component recieves it using @Input() colorRecieved and that recievedColor is template bound as background-color using attribute directive NgStyle.

Component 1 html

<h1>Component 1</h1>
<div  style="height: 320px">
  <div >
    <span
      [style.background]="selectedColor"
      [cpToggle]="true"
      [cpDialogDisplay]="'inline'"
      [cpCancelButton]="true"
      [cpCancelButtonClass]="'btn btn-primary btn-xs'"
      [(colorPicker)]="selectedColor"
    ></span>
  </div>
</div>
<br />
<h1>Component 2</h1>
<other-component-app [colorRecieved]="selectedColor"></other-component-app>

Other Component TS

@Component({
  selector: 'other-component-app',
  templateUrl: 'other.component.html',
  styleUrls: ['other.component.css'],
})
export class OtherComponent implements OnChanges {
  @Input() colorRecieved: string;

  constructor() {}

  ngOnChanges(changes: SimpleChanges) {
    if (changes?.colorRecieved) {
      console.log(this.colorRecieved); // this is added for demo purpouses
    }
  }
}

Other Component html

<div
  style="width: 400px; height: 300px; display: flex; justify-content: center"
  [ngStyle]="{ 'background-color': colorRecieved }">
  <h2>I am other component</h2>
</div>

Working example: https://stackblitz.com/edit/angular-color-picker-ngx-vnunhb?file=src/app/other-component/other.component.ts