DEV Community

Cover image for Fullscreen toggle functionality in Angular using Directives.

Fullscreen toggle functionality in Angular using Directives.

Adithya Sreyaj on April 24, 2021

We are gonna see how to leverage the power of directives to create a super simple fullscreen toggle functionality. Let's see the definition for a ...
Read full post
Collapse
 
londovir profile image
Londovir •

I'm curious. What's the intent behind using an empty pipe() call in the definition of the isMaximized$ property? I don't think I've often seen code where a call is made to pipe() that doesn't include operators within it. Does it help in the subscription teardown or something similar?

Collapse
 
adisreyaj profile image
Adithya Sreyaj • • Edited 
private isMaximizedSubject = new BehaviorSubject(false);
isMaximized$ = this.isMaximizedSubject.pipe();
// Another way
isMaximized$ = this.isMaximizedSubject.asObservable();
Enter fullscreen mode Exit fullscreen mode

Both ways convert the subject into an observable. So you convert subjects to observables and expose only the observables to make sure consumers cannot call next() and emit values.

Update: I have changed it to asObservable as I don't want to create this impression. Using asObservable is probably the better approach.

Collapse
 
umairhm profile image
Umair Hafeez •

Yeah, I've seen the usage of "asObservable()" more often.

Thread Thread
 
adisreyaj profile image
Adithya Sreyaj •

And I guess that's the best approach. So I've updated the code to reflect the same.

Thanks.

Collapse
 
_osku profile image
Greg •

Thank you.
Why do you use a Screenfull library and not the API ?
Best regards.

Collapse
 
adisreyaj profile image
Adithya Sreyaj •

Screenfull is a wrapper for the Fullscreen API. One benefit of it is that I don't have to worry about cross browser support.

Collapse
 
_osku profile image
Greg •

Thank you for reply.
Got it.
I gonna implement this functionnality on all my projects :)

Thread Thread
 
adisreyaj profile image
Adithya Sreyaj •

Great!
Make sure to listen to the fullscreen change event and update accordingly. This is to handle when the user clicks on Escape key.

Maybe I'll try to add that too in the code snippet.

Collapse
 
cuznerdexter profile image
cuznerdexter •

Good tutorial. I like the simple real world example. Helps understand how to approach something more complex. Thanks. 👍

Collapse
 
adisreyaj profile image
Adithya Sreyaj •

Thanks for the acknowledgement! I am trying to do exactly the same.

Collapse
 
umairhm profile image
Umair Hafeez •

Thank you for a pretty nice tutorial, I liked the simplicity of it.

Collapse
 
adisreyaj profile image
Adithya Sreyaj •

Thanks...appreciate it!