Retrieve the observable value and store it in a variable within my Angular 13 component

Incorporating Angular 13, my service contains the following observable:

      private _user = new BehaviorSubject<ApplicationUser | null>(null); 
      user$ = this._user.asObservable();

The ApplicationUser model is defined as:

    export interface ApplicationUser {
      userName: string;
      role: string;
    }

I understand how to access user$ in the template with:

    <li *ngIf="authService.user$ | async as user ; else login">
                  <a href="#" data-uk-icon="user">{{ user.userName }}</a>              
                </li>

However, I aim to manipulate it within my component. I have attempted:

    user!: ApplicationUser;
    
      ngOnInit(): void {
    
        this.authService.user$      
          .subscribe((test: ApplicationUser) => {
            this.user = test; 
          });
    }

I have also tried:

    this.user=this.authService.user$.subscribe();

This results in an error stating that Subscription is missing required properties (username, role).

Another attempt was:

    this.authService.user$
          .subscribe(test=> this.user = test);

However, a complaint arises indicating that Type 'ApplicationUser | null' cannot be assigned to type 'ApplicationUser'.

What should be the appropriate syntax in my component to store the observable data into my user variable?

Thank you

Answer №1

One way to enhance the subscription emitted value is by including a ! at the end:

this.userService.data$.subscribe((result) => this.data = result!);

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Using TypeScript: Functions incorporating properties

Recently, I made an interesting discovery in JavaScript: function foo() { console.log("FOO"); } foo.bar = "FOOBAR"; foo(); // logs "FOO" console.log(foo.bar); // "FOOBAR" This got me thinking: How would I repres ...

adjusting three sections within a flexible navigation bar

Having difficulties creating a dynamic navbar that changes on scroll and keeping the elements within the nav fixed when the menu options appear. For reference, you can check out this codepen: http://codepen.io/timothyfernandez/pen/azXQPV Any assistance w ...

Choosing from a list in Angular

I'm trying to make a dropdown menu that shows options in the format "code-description", but only displays the "code" portion when an option is selected. For example, showing "A-Apple" in the dropdown, but displaying only "A" when chosen. I am able to ...

Discovering the Authentic Page upon Completion of Load using PhantomJS

I am facing an issue while automatically downloading a theme on Wordpress using PhantomJS. The problem arises because the page is not fully evaluated even after it appears to be done loading. When trying to interact with elements on the page, such as clic ...

Utilizing formData.append in TypeScript to handle arrays

Hey there! I'm facing an issue while trying to send a form to my Profile endpoint. The problem lies in the 'user:{}' field, as I am unable to properly insert my array data into this specific field. Here is a breakdown of the fields within m ...

Tips on saving HTML table information into a .txt document?

Welcome to my Unique HTML Table. <table> <thead> <tr> <th>First Name</th> <th>Last Name</th> <th>Email Id</th> <th>Phone Number</th> <th>Prefered C ...

Issue encountered in event.d.ts file at line 74, character 76: TypeScript error TS2370: A rest parameter is required to be an array type

I am currently working on a project in Angular 6 and I encountered an issue while trying to integrate Google Maps into my website. When running ng serve, I received the following errors: ERROR in node_modules/@types/googlemaps/reference/event.d.ts(74,76): ...

Combining TypeScript with Vue3 to implement bootstrapVue

After using BootstrapVue as any, the error was corrected but unfortunately it still doesn't work in the browser. Here is what's inside main.ts: import { createApp }from 'vue'; import App from './App.vue'; import router from & ...

Can you identify the target of the term "this" in the upcoming JavaScript code?

DISCLAIMER: I am inquiring about a specific instance of this, not its general purpose. Please refrain from quick Google responses or copied answers (: The code snippet below demonstrates JavaScript/jQuery: var req = {}; function getData() { var from ...

Discovering distinct colors for this loading dots script

Looking for assistance with a 10 loading dots animation script. I'm trying to customize the color of each dot individually, but when I create separate divs for each dot and control their colors in CSS, it causes issues with the animation. If anyone ...

Is it possible to activate ionViewWill/DidEnter from a tab navigating to an external page in Ionic/Angular?

I am attempting to initiate an event upon returning to my tab page from a page outside of the routing module. 2. I have experimented with: Employing @ionic/angular NavController from both pages: From the tab page: this.navCtrl.navigateForward([&apos ...

Having trouble properly sending gender value through javascript/ajax functionality

Within my database, the gender_id attribute is configured as an enum with options ('M', 'F') and M serves as the default selection. Gender Selection Form <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12"> <label>Gend ...

Deactivate the node-xmpp client

I have been exploring the functionalities of node-xmpp and node-simple-xmpp in order to create a basic client. Everything seems to be working well, except for the disconnection. Following the example from simple-xmpp, I have created the following file: ...

Preventing dragging in Vis.js nodes after a double click: a definitive guide

Working with my Vis.js network, I have set up an event listener to capture double clicks on a node. ISSUE: After double-clicking a node, it unexpectedly starts dragging and remains attached to the mouse cursor until clicked again. How can I prevent this b ...

`Vanilla JavaScript AJAX request without using any external libraries or

Seeking advice on creating an ajax request function that is compatible across various browsers without relying on a javascript framework such as jQuery. Any ideas or suggestions are appreciated! ...

next-pwa seems to be malfunctioning without any discernible errors in the production environment

The repository is publicly available // next.config.js const withPWA = require("next-pwa"); module.exports = withPWA({ pwa: { dest: "public", sw: '/sw.js' }, }); _document.js _app.js Live I have verified the fu ...

Identify the CSS class for the ionic component on the webpage

Currently, I am in the process of developing an application using ionic 2 and angular 2. Within this app, I am utilizing the ionic 2 component known as ModalController. Unfortunately, I have encountered a challenge when attempting to adjust the size of th ...

Enhance the speed of filtering a large array of 4000+ objects in React for optimal performance

I am currently dealing with a component that generates an input of type text for filtering an array containing over 4000 objects. const { airports } = useContext(MainContext); const [airportListLocal, setAirportListLocal] = useState<Airport[]>(airp ...

Adjust the page URL during execution of a Protractor test

When conducting my protractor tests, I encountered a scenario where I needed to perform an action on page1 and then navigate to page2 in the same test script to verify the results. describe('something', function() { describe('foo', f ...

Generating an interactive Datepicker using Jquery

How can I design a dynamic date picker similar to the image provided below? I have attempted to create one, but I am looking for a more interactive date picker. Is there a way to achieve the design shown in the image? The current date picker does not meet ...