Send the data value to the header section

Question

Send the data value to the header section

Is there a way to dynamically display the project number within the header component, which is visible on all pages?

Here is the code for the Header component:

<div class="d-flex flex-column flex-md-row align-items-center px-md-4  bg-brown text-white ">

<h2 class="my-0 mr-md-auto">
<span>Project {{numero}}</span></h2>

<nav class="my-2 my-md-0 mr-md-3">
    <a class="p-2 text-white" href="#">Projects</a>
    <a class="p-2 text-white" href="#">Exit</a>
</nav>

</div>

And here's how it's included in other components' HTML files:

<app-header></app-header>
<div>my component</div>

In the corresponding typescript file (.ts), the 'numero' variable is defined as follows:

numero: string = "MY NUMERO";

Now the question arises: How can we pass and update the 'number' value in the header from other components? Should we utilize @Input () decorator for this purpose?

Your valuable insights are greatly appreciated. Thank you.

angular typescript components

Answer 1

Answer №1

If you're looking for a suggestion, I would advise utilizing a Service

To begin with, declare the Service

export class NumeroService {
    numeroSubject$ = new BehaviorSubject("MY NUMERO")
    numero$: Observable<string> = this.numeroSubject$.asObservable();
    updateNumero(newNumero: string) {
      this.numeroSubject$.next(newNumero)
    }
}

The code snippet above creates a BehaviorSubject with the initial value of "MY NUMERO". This creates an Observable with the same value. To update this value, simply pass the new value to the next() function of the Subject

Next step is to inject this service in the HeaderComponent TypeScript

constructor (private numeroService: NumeroService) {}
  numero$ = this.numeroService.numero$

HTML

<span>Project {{numero$ | async}}</span>

We utilize the async pipe to subscribe to the Observable

Lastly, inject the service where you want to update the numero$

constructor (private numeroService: NumeroService) {}
  ngOnInit() {
    this.numeroService.updateNumero("NEW NUMERO")
  }

Answer 2

If you're looking for a suggestion, I would advise utilizing a Service

To begin with, declare the Service

export class NumeroService {
    numeroSubject$ = new BehaviorSubject("MY NUMERO")
    numero$: Observable<string> = this.numeroSubject$.asObservable();
    updateNumero(newNumero: string) {
      this.numeroSubject$.next(newNumero)
    }
}

The code snippet above creates a BehaviorSubject with the initial value of "MY NUMERO". This creates an Observable with the same value. To update this value, simply pass the new value to the next() function of the Subject

Next step is to inject this service in the HeaderComponent TypeScript

constructor (private numeroService: NumeroService) {}
  numero$ = this.numeroService.numero$

HTML

<span>Project {{numero$ | async}}</span>

We utilize the async pipe to subscribe to the Observable

Lastly, inject the service where you want to update the numero$

constructor (private numeroService: NumeroService) {}
  ngOnInit() {
    this.numeroService.updateNumero("NEW NUMERO")
  }

Send the data value to the header section

Answer №1

Similar questions

Using dual index variables in Angular 4's ngFor loop for iterating through arrays

Creating a mechanism for automatic refreshing of JWT tokens in a Spring Boot and Angular application

Having trouble with Angular and PrimeNG: CSS styling not rendering

Why is the quantity of my item being increased? My method is adding it when it shouldn't be

Angular Object

Generate a unique identifier based on data type

What causes the index to display [object Object] rather than an integer in React?

Guide on setting up multiple Axios instances in NestJS

Arrangement of Bootstrap card components

When executing prisma generate, an error of TypeError is thrown stating that the collection is

Troubleshooting issue: Webpack dev server's Hot Module Replacement not functioning correctly when

Using Typescript and React to assign an array object to state

How can interfaces be effectively integrated with node and mongoose?

Issue encountered while attempting to initiate a new project with Angular CLI

Issue with Master Toggle functionality for checkbox within expanded rows of Mat-Table does not function correctly

Leverage CSS variables to dynamically create class names within SCSS

Determine the consistent type for numerous properties

Leveraging Enums in Angular 8 HTML template for conditional rendering with *ngIf

Angular: Keeping all FormControls in sync with model updates

Http Angular service lacks a provider