Angular async - how to get the string of an async method

Question

I use this service class in order to get the network status:

@Injectable()
export class NetworkConnectionService { 

constructor() {
} 

addNetworkConnectionListener() {
      Network.addListener('networkStatusChange', status => {
        console.log('Network status changed', status);
    });
}

getCurrentNetworkStatus() {
    const self = this;
    const currentNetworkStatus = async () => {
        const status = await Network.getStatus();
    };
    return currentNetworkStatus;
 }
}

and I want to get the status string in order to print it in html. How do I get this string?

What is Network? Why do you create a async function inside an async function? And why does the inner function return nothing? This code makes no sense to me, and is expected to not return the status. — JSON Derulo
– JSON Derulo, Commented Oct 20, 2024 at 15:57
The code is from capacitorjs.com/docs/apis/network and I will get the status somehow — quma
– quma, Commented Oct 20, 2024 at 17:57

JSON Derulo · Accepted Answer · 2024-10-20 18:16:52Z

You should make your getCurrentNetworkStatus() async, because Network.getStatus() is asynchronous (it returns a Promise). Also instead of creating an additional function, you should stick to one function, the additional function doesn't bring any value. One additional thing that needs to be fixed is that await Network.getStatus(); returns an object, and you need to access its connectionType property.

async getCurrentNetworkStatus() {
  const status = await Network.getStatus();
  return status.connectionType;
}

Now you have a function which returns a Promise holding a string. In your component, make sure to inject the service and that it's public, so it can be used in the template:

export class YourComponent {
  public networkConnectionService = inject(NetworkConnectionService);
}

Last step: Use the async pipe in the template to unwrap the string from the promise:

<p>
  Network status:
  {{ networkConnectionService.getCurrentNetworkStatus() | async }}
</p>

Collectives™ on Stack Overflow

Angular async - how to get the string of an async method

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related