To change multiple :host values with a button click in TypeScript, you need to first select the host elements and then modify their values using JavaScript.

Assuming you have several elements with :host pseudo-class, with a common CSS property you want to update, you can use the querySelectorAll() method to select them. For example, if you want to update their background-color, you can do it like this:

typescript
 
 
Copy code
const hostElements = document.querySelectorAll(':host');

Then, you can iterate through the list of host elements and update their style property with the new value:

typescript
 
 
Copy code
const newBackgroundColor = '#fff';
hostElements.forEach(hostElement => {
  hostElement.style.backgroundColor = newBackgroundColor;
});

Finally, you can add an event listener to the button element to execute this code when the button is clicked:

typescript
 
 
Copy code
const button = document.querySelector('button');
button.addEventListener('click', () => {
  const newBackgroundColor = '#fff';
  hostElements.forEach(hostElement => {
    hostElement.style.backgroundColor = newBackgroundColor;
  });
});

Here's an example using plain JavaScript that you can adapt to TypeScript:

html
 
 
Copy code
<template>
  <div :host>
    <button>Change color</button>
  </div>
  <div :host>
    <button>Change color</button>
  </div>
  <div :host>
    <button>Change color</button>
  </div>
</template>

<script>
  const hostElements = document.querySelectorAll(':host');
  const button = document.querySelector('button');
  button.addEventListener('click', () => {
    const newBackgroundColor = '#fff';
    hostElements.forEach(hostElement => {
      hostElement.style.backgroundColor = newBackgroundColor;
    });
  });
</script>

<style>
  :host {
    background-color: #f00;
  }
</style>

To change the :host colors with a button click in Angular, you can use Angular's Renderer2 to set the style of the component's host element when the button is clicked. Here's an example code snippet in TypeScript:

typescript
 
 
Copy code
import { Component, Renderer2, ElementRef } from '@angular/core';

@Component({...})
export class MyComponent {
  constructor(private renderer: Renderer2, private elRef: ElementRef) {}

  changeColors() {
    const hostElement = this.elRef.nativeElement;
    this.renderer.setStyle(hostElement, 'background-color', 'red');
    this.renderer.setStyle(hostElement, 'color', 'white');
  }
}

In this example, we're using the Renderer2 service and the ElementRef to get a reference to the component's host element. When the changeColors() method is called (which could be triggered by a button click), we use the setStyle() method to update the background color and text color of the host element.

Here's a link to the Angular documentation on Renderer2: https://angular.io/api/core/Renderer2

To change the :host CSS in a parent component with a button click in a child component, you can make use of Angular's @Input and @Output decorators.

In the parent component, create a variable that stores the CSS for the :host selector. Then, create an @Input decorator that binds this variable to the child component.

typescript
 
 
Copy code
// parent.component.ts

@Component({
  selector: 'app-parent',
  template: `
    <div class="parent-host" [ngStyle]="parentHostStyles">
      <app-child (onButtonClick)="updateParentHostStyles()"></app-child>
    </div>
  `
})
export class ParentComponent {
  parentHostStyles = { 'background-color': 'blue' };

  @Input() 
  set parentHost(css: object) {
    this.parentHostStyles = css;
  }

  updateParentHostStyles() {
    const newStyles = {'background-color': 'red'};
    this.parentHostStyles = {...this.parentHostStyles, ...newStyles};
  }
}

In the child component, create a button that emits an event with the new CSS object. Use the @Output decorator to emit this event to the parent component.

typescript
 
 
Copy code
// child.component.ts

@Component({
  selector: 'app-child',
  template: `
    <button (click)="updateHostStyles()">Change Host Styles</button>
  `
})
export class ChildComponent {
  @Output() onButtonClick = new EventEmitter<object>();

  updateHostStyles() {
    const newStyles = {'background-color': 'green'};
    this.onButtonClick.emit(newStyles);
  }
}

In the example above, the parent component listens to the onButtonClick event emitted by the child component when the button is clicked. This event contains a new CSS object, which is merged with the existing parentHostStyles using the spread operator. This updates the :host CSS for the parent component.

Note that this solution assumes that the parent and child components are in a parent-child relationship. If they are not, you may need to use a service to communicate between them.