Forem: Siddharth Ajmera 🇮🇳

Trigger Native Share Intent : Share text, url and files using JavaScript

Siddharth Ajmera 🇮🇳 — Fri, 15 Jan 2021 17:24:15 +0000

There are a lot of really new and exciting APIs that navigator exposes. I just came across navigator.share() that lets you share data like url, text, title, and files by triggering the native share mechanism on the device that you're running this on.

So you call it in your Web Apps and what you get in return are amazing native experiences like this:

Looks great, right? The specification of this Web Share API is still in the draft stage at the moment, and could change in the near future.

The browser support isn't that great either. At the time of writing this article, it's just supported by Desktop Browsers like Edge and Safari, and Mobile Browsers like Chrome and Opera for Android, Safari for iOS, and Samsung Internet.

That being said, you can still try it out and implement it in one of your Web Apps without breaking the world. Let's see how we can do that in some of the most used front-end frameworks(in Alphabatical order 😬) at the moment: Angular, React, Svete, and Vue.

So we'll see implementation of a very simple form that let's the user fill in things like title, url, text, and files, and then depending on whether something is supported by the browser or not, we'll either trigger a native share intent that share just title, url, and text; or something that shares a title, url, and files or just an alert saying the browser doesn't support this.

The business logic remains the same. It's JavaScript afterall. There's a function that handles the file change on an input type="file". And then a function that actually handles the form submission and invokes native share by calling navigator.share()

Since files are involved, we will first have to check if the files that we're trying to share could be shared or not. For that, we'll just use navigator.canShare(). We'll share the files instead of a url if it returns true. Else we'll just share the url along with text and title.

NOTE: For the sake of simplicity, I've implemented things in just one single component. I'm also not explaining things step by step as I usually do to keep it brief. In case you have any trouble understanding anything, please do let me know in the comments below.

You can find a working source for all the mentioned technologies below:

In Angular:

In React:

In Svelte:

In Vue:

JavaScript is extremely powerful and can be used to do a lot of really interesting things that take the user experince of web applications to the next level. I've written another article where you could use AmbientLightSensor to determine the lighting conditions that the device is being used in, in order to automatically switch themes from Dark to Light or vice-versa. Check it out here:

Switch themes like a fox 🦊 based on Ambient Light 💡 in your Angular Apps

Siddharth Ajmera 🇮🇳 for Angular ・ Mar 23 '20 ・ 9 min read

#angular #typescript #javascript #webdev

Hope you found this article interesting/helpful. In case you did, give it a like and share it with your peers who might find this useful. Also comment below mentioning use cases, where you find this useful or if you already have some ideas where you'd use this in your web apps.

Until next time! ✌🏻

We hosted a successful India-wide Angular Fundamentals Workshop with ngGirls 👩‍💻

Siddharth Ajmera 🇮🇳 — Sun, 05 Jul 2020 11:42:34 +0000

Ever since COVID-19 stuck the world, a lot of communities have taken to hosting events, meetups, conferences, and webinars online. It might look really easy and super convenient. But trust me when I say this, it's a hell lot of work.

It takes a lot of time, a lot of collaboration with other people who are willing to serve the community, and a lot of effort and energy into hosting such events(may it be offline or online). At one point, you might even think, what's the point? Why am I doing all this?

The motivation 🔥

Well, just think of it as a ripple effect. You see amazing people out there in the community. You get inspired by them. Then you do similar things(with them or without them). And then you inspire others to do the same.

I met Martina Kraus via the Google Developers Expert Program. And we're connected on Twitter ever since. I used to see all the amazing work that she did for the community through these awesome ngGirls Workshops that she used to organize. And then I met her in person at ng-India 2020

// Detect dark theme var iframe = document.getElementById('tweet-1234304691820998657-626'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1234304691820998657&theme=dark" }

That's where I got to discuss with her regarding the ngGirls Workshops and how we could do one for India as well. But since we couldn't do it in person as she's based out in Germany and I'm based out in Australia, doing it online was the only way we could do it. But we couldn't do it nationwide in the first go as we hadn't ever organized one.

ngGirls@Indore (where it all started) 👶

Since we had just started hosting events online, we needed to test waters so that we could come across as many challenges as possible. We thought we'd start small to face all those challenges and learn from them. And so we hosted a ngGirls@India workshop at a very small scale. We didn't promote the event soo much as it would have led to more participation.

With close to 2 dozen participants and merely 5 mentors, we successfully hosted the first ngGirls@India workshop(check out the key highlights from the event here). This workshop was mainly focused on the central part of India. That's also where I originally am from, BTW. And it was only possible because of more amazing community members and my dear friends Srashti and Gaurav.

After working with them, I was certain that these are definitely the people I want to collaborate with. The way they work, their ideas, their management, and people skills are exceptional.

But we needed to scale. And we had soo many things in mind. And we wanted to incorporate all those things in the workshops that we conducted. And so we set out to organize the next one in Australia at a slightly bigger scale.

ngGirls@Australia (playing with scale) 🦘

This was where we had close to 150 registrations for participating and about 30 mentors. We also had Tanya Butenko(the founder of MusesCodeJS) and Shmuela Jacobs(the founder of ngGirls) as our keynote speakers.

A peculiar thing about this workshop was that most of the participants here and a lot of mentors were from India. Even the timezone difference between India and Australia(which was 4:30 hours that time) couldn't stop them from attending the workshop. They woke up at around 4 AM India Time, just to attend the workshop or mentor budding female developers in Angular.

This gave us a positive reinforcement that there's a lot of women out there in India who want to attend workshops like these. Plus a lot of people out there, who want to mentor and empower women, in India. That's when we started gearing up for #ngGirlsIndia

ngGirls@India 🇮🇳

But we did know that India had its fair share of issues in terms of online events like these. So we got onboard a vibrant bunch of people as volunteers.

The Volunteers 💪

These are mostly college students who are also actively involved in doing a lot of community work out there and are associated with various programs and organizations like GirlScript and Microsoft Student Partners Program.

They made our lives as organizers soo much easier and took care of a lot of key aspects of organizing the workshop like:

Promoting the workshop so that it reaches to every potential female out there.
Calling potential participants to get them onboarded.
Onboarding them to MS Teams(the platform where we hosted the workshop).
Proofreading the tutorial that we shared with the participants for the workshop.
Creating posters for the event.
Coordinating with mentors and participants to resolve their issues throughout the workshop etc.

On that note, we'd like to give a big shout out to Aditya Oberai, Ritesh Sharma, Pooja Vyas, Samiksha Kapoor, Ali Mustufa, Aanchal Mishra, Sujay Das,Simran Makhija, Akshay Mandliya, Ekansh Gupta, Vaidehi Jain, Tanushree Aggarwal, and Vaidehi Bhardwaj for all the work they did in the workshop. These are a very talented bunch of people.

The Mentors 👨‍🏫👩‍🏫

A workshop like this was unimaginable without the support of mentors. We had a very diverse set of mentors. Diverse in terms of geographies(Australia, Europe, South America, and India), genders, and experience levels(from 2nd-year college students to CTOs of successful companies to Google Developer Experts).

We'd like to extend a deep appreciation to

Chandramouli Srivastava, Vaishali Tekale, Nehal Jaisalmeria, Akanksha Singh,Anupriya Batra, Santosh Yadav, Vindhya Hegde, Leonel Elimpe, Purwa Gaikwad, Mohit Khandelwal, Hiren Dave, Jonathan Yee, Keilla Fernandes, Federico Tasso, Jalpesh Vadgama, Varit Patel, Sandli Matharoo, Anjali Verma, Adrita Sharma, Suhas Parameshwara, Priyal Jain, Lakshita Malhotra, Shilpa Lalwani, Ayush Mishra, Aditya Tyagi, Yashwanth Sagar, Sanchi Bansal, Yasin Shah, Devansh Shrivastava, Aditya Gusain, and Shachita Jain for dedicating their time and efforts the whole day for guiding and helping all our participants.

Another great aspect of the workshops that we hosted in the past was that a lot of mentors for this workshop were participants from the past workshops. This will give you some perspective on the impact that such workshops have.

As I mentioned earlier, it's more of a ripple effect. The participants from this workshop will mentor other budding female web developers in the future workshops. You get inspired by others, then do something and inspire others. That's also why we wanted to listen to some stories from our inspirations. That's where the Keynote Speakers come into the picture.

The Keynote Speakers 🎤

We needed some talks that could motivate the participants and guide them in the right direction at the end of the workshop.

So we started the day with an amazing keynote session by Minko Gechev from the Angular Team at Google. Minko's story fuelled the enthusiasm of all the participants and they joined the workshop on a really positive and motivating note. We'd recommend you to watch his Keynote. Check it out right here:

We ended the day with an amazing closing keynote session by Lakshya Sivaramakrishnan from the Google India Team who talked about the Women Techmakers Program. She talked about the power of community and how it can impact your lives in unimaginable ways. You'll get to know about the power of community after watching her closing keynote here:

Moving on to the most important aspect of the workshop.

Participants 👩‍💻

We got an amazing response from India in terms of participation. Close to 300 people registered for the workshop and about 180 people showed up. Nearly 120 participants successfully completed the workshop by participating in extensive coding sessions and also testing the concepts they acquired via quizzes.

And we received wonderful feedback from a lot of our participants. That's what keeps us motivated into doing this community work after all.

And so, for all of that and for receiving the workshop so well, we(the whole ngGirls@India Family) thank you all very much. 🤗

We'd also have to thank Biswajeet from Google India for supporting us with all the requests for this workshop.

Where to from here?

Well. This is just the beginning and we've just gotten started.

We keep receiving requests from various people for doing such workshops in other technologies, and for something that's open to other genders too. Receiving a lot of these requests got me thinking about doing something in that direction.

All About Web(The Genesis) 🚀

There are a lot of really amazing people out there, who are doing soo much for the community. There are people building amazing things, in various technologies and sharing about it with the world. We feel that if we get these people to share their work on a single platform, it would make a huge impact.

So that's the general idea behind All About Web. We want to make this as something that you could reach out to, for learning about several different web-related technologies, getting inspired by various active members from the community, and expanding your perspectives about the web in general.

That's also something that Ashok discussed with me recently. And so we also thought we'd get him on-board. He has a lot of experience and has been working in this industry for well over a decade now. He is a really amazing person to work with and there's always soo much to learn from him.

And so with that, we present to you, All About Web, an amazing community for web around the world. The ngGirls@India Workshop was the very first event that we did under All About Web. But you can expect a lot more such events including workshops, webinars, and pair programming sessions from us.

Consider staying in touch on social to stay up to date on the latest webinars, meetups, workshops that we organize and tech-related content that we post.

Relevant Links to help you find us:

All About Web | Our Twitter Handle | Our YouTube Channel | Our LinkedIn Page

Implement Google Sign-In(OAuth) in your Angular App in under 15 minutes 🚀

Siddharth Ajmera 🇮🇳 — Sun, 12 Apr 2020 11:45:34 +0000

PRELUDE: My dear friend Martina(who's a fellow GDE in Angular & Web Tech) and I both love cats a lot. 😻 One fine day while we were talking about collaborating on something, we came up with a really crazy(but interesting) idea. The idea of creating KittyGram: A super-minimal Instagram Clone that allows uploading only Cat 🐱 Photos. 💡 Cute. Isn't it?

This is an article in a series of articles where we'll create KittyGram We'll implement KittyGram using the best front-end web framework in the world(ahem Angular ahem).

For the scope of this article, we'll mainly implement Google Sign-In and routing.

This article expects a basic understanding of Angular, Angular Material and Firebase.

I actually have a YouTube Playlist that you can refer to regarding Firebase just in case.

That being said, this article is intended for an audience with mixed experience levels. I've still added a TL;DR; below 👇🏻 as a precautionary measure, in case you're just interested in a specific section.

TL;DR;

Don't like reading? 😵
Project Overview 🔭
Setting up a Firebase Project 🔥
Setting up an Angular App 🅰
- Setting up AngularMaterial
- Setting up AngularFire
Implementing the Angular App
Bringing it all together with Routing 🗺
Next Steps 👣
Closing Notes 🎉

Don't like reading? 😵

Ah! You're just like me. 🤗 I also find it difficult to understand things just by reading them. Worry not! I've got you covered with a video implementing this App along with the explanation.

This video is a part of @PairAngular, a super awesome YouTube Channel where @Martina, and I will host more pair programming videos like the one above. Like what you see? Subscribe to the PairAngular YouTube Channel to stay in the loop for more such sessions in the future. 🙂

Project Overview 🔭

Since this is a super-minimal Instagram Clone, we'll not really focus on very specific aspects/features of Instagram. We just need a way for the user to be able to:

Login via Google and Logout.
Post an image of cats - CREATE.
See cat images posted by other users and react on them(any number of times they want) - FEED.

Since in this article, we're only focusing on implementing Google Sign-In, we'll just use placeholder images for the CREATE and FEED features.

Once this part is implemented, it should look and react something like this:

As you can clearly see from the video above there are different aspects to the App.

From the UI perspective, we'll need a CreateComponent, a FeedComponent, a HeaderComponent, and a ProfileCardComponent. We'll be using Angular Material as well in here for most of these components.

From the routing perspective, we have a /create route and a /feed route. We also don't want to allow an unauthorized user to access the /create route. So we'll need to guard the /create route.

"How would we implement Google Sign-In thought?" you might ask. Handling OAuth flow, token lifecycle, and integration with Google APIs can be pretty complex.

But don't you worry about managing all those things on your own. Google has black-boxed this whole complexity and exposed it as a service that we can leverage with minimal efforts. The service is called Firebase Authentication and that's what we'll be using for this application.

Alright! So now that we have an overview of the whole application and the parts that it will have, let's start working on building this thing from scratch.

Setting up a Firebase Project 🔥

To use Firebase Authentication, we'll need to set up a Firebase Project. You'll need a Firebase Account for that which you can create by just logging in to Firebase Console with your Google Account.

Follow this short 1ish-minute video to set up the Firebase Project:

Copy and paste this config that we get somewhere. We'll be using it later.

Great! So now we have a Project Setup let's also now quickly enable Authentication. Follow the video below:

Awesome! Now we have completely set up a Firebase Project and enabled Google Sign-In on it. Let's now go ahead and set up our Angular app.

Setting up an Angular App 🅰

Let's start by creating a new Angular App. Make sure that you're using the latest version of Angular CLI for this.

Install the latest version of Angular CLI using:

npm i -g @angular/cli@latest

Once it installs, you can verify the version that you have by running ng --version:

Sweet! Now let's create a new Angular project by running: ng new KittyGram

Let's navigate to the Project folder that just got created by doing: cd KittyGram(on Windows)

Alright! Now. We can clearly see from the Project Overview section video that we'll be using Angular Material. So let's set up our Angular App to use Angular Material.

Setting up AngularMaterial:

Set up @angular/material using:

ng add @angular/material

It might ask you things like the theme you want to use, whether to set-up typography and animations or not. Just answer as per the screenshot below.

Once that's done, I'll just refactor the code a bit to suit the style that I like to generally use. It's opinionated BTW, and you don't really have to do this.

Migrate Theme paths from `angular.json` to `styles.scss`

REASON: I just don't like my angular.json to be polluted with CSS files considering that we already have a styles.scss file. So we can just import these CSS files in.

Search for the deeppurple-amber.css in angular.json and remove those URLs from there. Remove this URL:

"./node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css",

You should be able to find two occurrences of this URL before the refactor. After the refactor, the styles array in your angular.json should look like this:

{
  "...": "...",
  "projects": {
    "KittyGram": {
      "...": "...",
      "architect": {
        "build": {
          "...": "...",
          "options": {
            ...
            "styles": [
              "src/styles.scss"
            ],
            ...
          },
          ...
        },
        ...
        "test": {
          ...
          "options": {
            ...
            "styles": [
              "src/styles.scss"
            ],
            ...
          }
        },
        ...
      }
    }
  },
  ...
}

Now move this URL to styles.scss. After the change your styles.scss should look something like this:

/* You can add global styles to this file, and also import other style files */

html,
body {
  height: 100%;
}
body {
  margin: 0;
  font-family: Roboto, "Helvetica Neue", sans-serif;
}

@import "~@angular/material/prebuilt-themes/deeppurple-amber.css";

Creating an `AppMaterialModule`:

We've already covered this in one of the past articles. So I won't go into much detail on this. Just one thing I'll do is export the BrowserAnimationsModule as well from here.

So our AppMaterialModule would look something like this:

`app-material.module.ts`

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatButtonModule } from '@angular/material/button';
import { MatDividerModule } from '@angular/material/divider';
import { MatIconModule } from '@angular/material/icon';
import { MatMenuModule } from '@angular/material/menu';
import { MatToolbarModule } from '@angular/material/toolbar';
import { MatTooltipModule } from '@angular/material/tooltip';
import { MatSnackBarModule } from '@angular/material/snack-bar';
import { NgModule } from '@angular/core';

@NgModule({
  exports: [
    BrowserAnimationsModule,
    MatButtonModule,
    MatDividerModule,
    MatIconModule,
    MatMenuModule,
    MatToolbarModule,
    MatTooltipModule,
    MatSnackBarModule,
  ],
})
export class AppMaterialModule {}

Next step would be to setup AngularFire.

Setting up AngularFire:

We need to use Firebase in our Angular App to enable Login. Angular has an official Firebase SDK called @angular/fire that we can use for this. So let's do that next. Set up @angular/fire using:

ng add @angular/fire

It might ask you things like permissions to collect usage data for analytics, cli-usage, and error reporting information, etc. Apart from that, it might also ask you to paste in your Authorization code for which, it would open up a pop-up screen for you to log in to your Gmail account which you used to register to Firebase.

Then depending on whether you're able to paste in the auth-code successfully or not, it might also ask you to run firebase login --reauth to do that for you.

In a successful scenario, it might ask you to select your Firebase App from the list of Firebase Projects that you've created on the Firebase Console. Something like this:

We also need the firebase JavaScript SDK. So let's install that as well using:

npm i firebase

Once that's done, we'll add a few things here and there to make it suit the style that I like to generally use. We'll start by creating an AppFirebaseModule

Creating an `AppFirebaseModule`:

I'll run ng g m app-firebase to generate this module. It will be created in a folder of its own. So I'll move it out of the folder and delete the empty folder.

Now when we set up a Firebase Project, we also copied the configuration somewhere. We will need it now. Let's store that config in an object named firebase in our environments.ts and environments.prod.ts files:

`environment.ts`

export const environment = {
  production: false,
  firebase: {
    apiKey: 'YOUR apiKey HERE',
    authDomain: 'YOUR authDomain HERE',
    databaseURL: 'YOUR databaseURL HERE',
    projectId: 'YOUR projectId HERE',
    storageBucket: 'YOUR storageBucket HERE',
    messagingSenderId: 'YOUR messagingSenderId HERE',
    appId: 'YOUR appId HERE',
    measurementId: 'YOUR measurementId HERE',
  },
};

NOTE: This config should be kept private and shouldn't be shared publicly.

Now in our AppFirebaseModule, let's set-up the AngularFire modules that we'll need for Google Sign-In.

So we'll need the AngularFireModule which we use to initialize our Firebase Project in our Angular App. And we'll need the AngularFireAuthModule which has all the helpers we'll need to login and logout.

We call the initializeApp method on our AngularFireModule and pass it the configuration stored in the environment const. And then we can expose the AngularFireModule, AngularFireAuthModule from here. In code, this would look something like this:

`app-firebase.module.ts`

import { AngularFireAuthModule } from '@angular/fire/auth';
import { AngularFireModule } from '@angular/fire';
import { NgModule } from '@angular/core';

import { environment } from '../environments/environment';

@NgModule({
  imports: [AngularFireModule.initializeApp(environment.firebase)],
  exports: [AngularFireModule, AngularFireAuthModule],
})
export class AppFirebaseModule {}

Now that we're done setting up both AngularMaterial and AngularFire, we can now import both AppFirebaseModule and AppMaterialModule module in our AppModule:

...
import { AppFirebaseModule } from './app-firebase.module';
import { AppMaterialModule } from './app-material.module';
...

@NgModule({
  ...
  imports: [
    ...
    AppFirebaseModule,
    AppMaterialModule,
    ...
  ],
  ...
})
export class AppModule {}

Implementing the Angular App

Implementing the Angular App is pretty straightforward. For the scope of this article, we'll need four components:

The HeaderComponent that would be our Primary Navbar. This will have buttons to log in, create a post, and show the user's profile card. These buttons would be displayed conditionally based on whether the user is logged in or not.
The Profile Card Component, that will have some details about the user and a button to logout.
The FeedCompoent for the /feed route and a similar CreateComponent for the /feed route.

Let's create them using the following command:

ng g c components/create --module=app && ng g c components/feed --module=app && ng g c components/profile-card --module=app && ng g c components/header --module=app

This command will create these 4 components for us in a folder named components.

We just need placeholder images for CreateComponent and FeedComponent. I downloaded these images from Undraw by Katerina Limpitsouni. We can store them in the assets folder and link them in the Component Templates for:

`create.component.html`:

<img alt="Create Post" class="placeholder-image" src="/assets/create.png" />

`feed.component.html`:

<img alt="Feed" class="placeholder-image" src="/assets/feed.png">

Before we implement the remaining two Components, we need a way to make the user login and logout. AngularFire makes it really easy. It has an AngularFireAuthModule module that exposes the AngularFireAuth service that we can inject as a dependency. We can then call methods on it to login and logout.

Apart from that, this service also exposes an authState Observable that has the state data related to the currently logged-in user. So we can implement a service that exposes methods to help us login and logout, and the user$ Observable. Something as simple as this:

`auth.service.ts`:

import { AngularFireAuth } from '@angular/fire/auth';
import { auth } from 'firebase/app';
import { BehaviorSubject, Observable, from } from 'rxjs';
import { Injectable } from '@angular/core';
import { switchMap } from 'rxjs/operators';

@Injectable({
  providedIn: 'root',
})
export class AuthService {
  private user: BehaviorSubject<
    Observable<firebase.User>
  > = new BehaviorSubject<Observable<firebase.User>>(null);
  user$ = this.user
    .asObservable()
    .pipe(switchMap((user: Observable<firebase.User>) => user));

  constructor(private afAuth: AngularFireAuth) {
    this.user.next(this.afAuth.authState);
  }

  loginViaGoogle(): Observable<auth.UserCredential> {
    return from(this.afAuth.signInWithPopup(new auth.GoogleAuthProvider()));
  }

  logout(): Observable<void> {
    return from(this.afAuth.signOut());
  }
}

The implementation here is pretty straight forward. Please feel free to comment below if something here didn't make sense.

Great. Now we have a service that we can inject as a dependency in our HeaderComponent. The HeaderComponent will be leveraging these methods and the user$ Observable to show the options on the navbar accordingly. We'll also be subscribe ing to the Observables returned from the loginViaGoogle and logout methods to show some alert as snackbars.

And since we're doing that, we'll be using the take operator to do it so that we don't have to unsubscribe manually.

`header.component.ts`:

import { catchError, take } from 'rxjs/operators';
import { Component } from '@angular/core';
import { EMPTY, Observable, of } from 'rxjs';
import { MatSnackBar } from '@angular/material/snack-bar';
import { Router } from '@angular/router';

import { AuthService } from '../../services/auth/auth.service';
import { FEED } from './../../consts/routes.const';

@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.scss'],
})
export class HeaderComponent {
  user$: Observable<firebase.User> = this.auth.user$;

  constructor(
    private readonly auth: AuthService,
    private readonly snackBar: MatSnackBar,
    private readonly router: Router,
  ) {}

  login() {
    this.auth
      .loginViaGoogle()
      .pipe(
        take(1),
        catchError((error) => {
          this.snackBar.open(`${error.message} 😢`, 'Close', {
            duration: 4000,
          });
          return EMPTY;
        }),
      )
      .subscribe(
        (response) =>
          response &&
          this.snackBar.open(
            `Oh! You're here. I demand that you feed me, Hooman. 😾`,
            'Close',
            {
              duration: 4000,
            },
          ),
      );
  }

  logout() {
    this.auth
      .logout()
      .pipe(take(1))
      .subscribe((response) => {
        this.router.navigate([`/${FEED}`]);
        this.snackBar.open('Come back soon with treats! 😿', 'Close', {
          duration: 4000,
        });
      });
  }
}

The implementation is also pretty straightforward. We also explicitly navigate the user to the /feed route once the user logs out.

NOTE: In a real project, I would also move the snack bar messages to a const file.

For the template, if the user is logged-in, we'll show the ProfileCardComponent and the Create icon. Else we'll show the user a Login Icon.

`header.component.html`:

<mat-toolbar color="primary">
  <mat-toolbar-row>
    <button 
      mat-button 
      routerLink="/feed"
      matTooltip="🐱Gram Home">
      🐱Gram
    </button>
    <span class="spacer"></span>
    <ng-container *ngIf="user$ | async as user; else loginIcon">

      <button 
        mat-icon-button
        routerLink="/create"
        matTooltip="Post a cute 🐱"
        >
        <mat-icon
          aria-hidden="false"
          aria-label="Post a cute 🐱"
          >
          cloud_upload
        </mat-icon>
      </button>

      <app-profile-card 
        [user]="user"
        (logoutClick)="logout()">
      </app-profile-card>

    </ng-container>
    <ng-template #loginIcon>
      <button 
        mat-icon-button
        (click)="login()"
        matTooltip="Login"
        >
        <mat-icon
          aria-hidden="false"
          aria-label="Login"
          >
          fingerprint
        </mat-icon>
      </button>
    </ng-template>
  </mat-toolbar-row>
</mat-toolbar>

As you can clearly see, we're using the ProfileCardComponent as a child component. This is a presentation component that accepts a user as an @Input property and emits an event when the user clicks the logout button as the logoutClick @Output property.

So this is how our ProfileCardComponent would look like:

`profile-card.component.ts`:

import { Component, EventEmitter, Input, Output } from '@angular/core';

@Component({
  selector: 'app-profile-card',
  templateUrl: './profile-card.component.html',
  styleUrls: ['./profile-card.component.scss'],
})
export class ProfileCardComponent {
  @Input() user: firebase.User;
  @Output() logoutClick: EventEmitter<null> = new EventEmitter<null>();

  logout() {
    this.logoutClick.emit();
  }
}

And the template would look something like this:

`profile-card.component.html`:

<button
  mat-mini-fab
  color="primary"
  class="avatar-button"
  [matMenuTriggerFor]="beforeMenu"
>
  <img 
    [alt]="user.displayName"
    [src]="user.photoURL"
    class="avatar" />
</button>
<mat-menu #beforeMenu="matMenu" xPosition="before">
  <div class="profile-card">
    <img 
      [alt]="user.displayName"
      [src]="user.photoURL" 
      class="big-avatar" />
    <h4>{{ user.displayName }}</h4>
    <p>{{ user.email }}</p>
    <mat-divider></mat-divider>
    <button mat-stroked-button (click)="logout()">
      Sign Out
    </button>
    <mat-divider></mat-divider>
    <p class="profile-footer">
      Made with 😻 by <a href="https://twitter.com/SiddAjmera">@SiddAjmera</a>
    </p>
  </div>
</mat-menu>

Now we have all the modules, components, and the service in place. Let's bring it all together via routing.

Bringing it all together with Routing 🗺

So for this, we'll need to set up routing by configuring our AppRoutingModule. We already know that we have two routes:

The /feed route would navigate the user to the FeedComponent.
The /create route would navigate the user to the CreateComponent.

But the /create route shouldn't be accessible by unauthorized users. In a world without AngularFire, we'd implement a CanActivate Guard to do this. But thanks to @angular/fire, we have an AngularFireAuthGuard guard that we can configure with the redirectUnauthorizedTo helper from it. Configuring this will allow us to tell Angular where to navigate unauthorized users to.

All that in code would look something like this:

`app-routing.module.ts`:

import {
  AngularFireAuthGuard,
  redirectUnauthorizedTo,
} from '@angular/fire/auth-guard';
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { BASE, CREATE, FEED } from './consts/routes.const';
import { CreateComponent } from './components/create/create.component';
import { FeedComponent } from './components/feed/feed.component';

const redirectUnauthorizedToLogin = () => redirectUnauthorizedTo([FEED]);

const routes: Routes = [
  {
    path: BASE,
    redirectTo: `/${FEED}`,
    pathMatch: 'full',
  },
  {
    path: FEED,
    component: FeedComponent,
  },
  {
    path: CREATE,
    component: CreateComponent,
    canActivate: [AngularFireAuthGuard],
    data: { authGuardPipe: redirectUnauthorizedToLogin },
  },
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule],
})
export class AppRoutingModule {}

And that's it. Our Angular app is now ready with google sign-in and routing. 🎉✨

You can find source-code of the Project here:

SiddAjmera / KittyGramAuth

This respository demonstrates the authentication and authorization that we have in KittyGram

KittyGramAuth

This project was generated with Angular CLI version 9.0.5.

Development server

Run ng serve for a dev server. Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.

Code scaffolding

Build

Run ng build to build the project. The build artifacts will be stored in the dist/ directory. Use the --prod flag for a production build.

Running unit tests

Run ng test to execute the unit tests via Karma.

Running end-to-end tests

Run ng e2e to execute the end-to-end tests via Protractor.

Further help

To get more help on the Angular CLI use ng help or go check out the Angular CLI README.

View on GitHub

Next Steps 👣

KittyGram has a lot of features. And this is just one piece of the whole puzzle. All such greatness has humble beginnings like the one that we just build. In the next article, we'll implement the CreateComponent as a Reactive Form. We'll also implement Firebase Storage in it so that we could upload the images to a Firebase Storage Bucket. Can't wait? Here it is:

Implement file upload with Firebase Storage 🔥 in our Angular App: The simple way

Martina Kraus for Angular ・ Apr 26 '20

#angular #javascript #typescript #webdev

Closing Notes 🎉

And that brings us to the end of this article. Thanks for sticking around. I hope you liked it.

A big shout-out to Martina Kraus for proofreading this and collaborating with me on this project. I'm also really grateful to Akhil and Rajat for proofreading this article and providing constructive feedback to make it better.

I hope this article has taught you something new related to Angular and Firebase. If it did hit that 🧡/🦄 icon, and add it to your reading list(🔖). Also, share this article with your friends who are new to Angular and want to achieve something similar.

Also, don't forget to follow Martina right here:

Martina KrausFollow

Martina is a Google Developer Expert in Angular and web technologies. Besides giving workshops as an Angular trainer,she is a core member of the ngGirls Team, and co-organizes the NG-DE conference

Until next time then. 👋🏻

Icon Courtesy: AngularIO Press Kit | Login by lastspark from the Noun Project

Switch themes like a fox 🦊 based on Ambient Light 💡 in your Angular Apps

Siddharth Ajmera 🇮🇳 — Mon, 23 Mar 2020 08:11:41 +0000

DISCLAIMER: This is a continuation of this article where I write about implementing a theme switch in an Angular App. If you haven't already read that, I recommend you to read this first.👇🏻

Let's implement a Theme Switch 🎨 like the Angular Material Site

Siddharth Ajmera 🇮🇳 for Angular ・ Mar 19 '20

#angular #javascript #typescript #webdev

That way you'll have more context of where I'm coming from.🙂

This article is intended for an audience with mixed experience levels. I've still added a TL;DR; below 👇🏻 as a precautionary measure, in case you're just interested in a specific section.

TL;DR;

Why Dark Theme in the Dark? 🤷🏻‍♂️
Determining when it's dark⚡
Enter: the AmbientLightSensor Web Interface 📡
- Feature Detection 🕵🏻‍♂️
- Handling Edge Cases
Using the AmbientLightSensor Web Interface
Trying it out 🧪
Next Steps 👣
Closing Notes 🎉

To start, we'll just continue with the same Angular App that we built in the last article.

Why Dark Theme in the Dark? 🤷🏻‍♂️

So, as I mentioned in the previous article, Dark Mode is awesome and low-lit ambiances are the best suited for #DarkMode.

Now changing themes in our App based on user interaction is OK. But we can take it to the next level by intelligently switching themes, based on the ambient lighting conditions that the user is in.

And that's exactly what we're going to do in this article.

Determining when it's dark ⚡

Now you might think, how exactly do we determine that it's dark. Well, there's something called Illuminance that can help us do that.

According to Wikipedia:

Illuminance is a measure of the luminous flux spread over a given area.

One can think of luminous flux (which is measured in lumens BTW) as a measure of the total "amount" of visible light present, and the illuminance as a measure of the intensity of illumination on a surface.

"So in simpler terms, the luminous flux is inversely proportional to darkness."

For some reference, we'll use this table to determine the darkness:

Judging from the table above, it would be safe to consider that if the luminous flux is 10 or less, we're in a dark environment. But that is just a number that I've chosen. Feel free to chose a number between 10 - 20(or 50 if you like) based on your preference.

Okay, so we can determine whether the environments are light or dark based on the luminous flux. But how do we determine luminous flux? 🤔

Enter: the `AmbientLightSensor` Web Interface 📡

This is a cool new interface from the Sensor APIs that returns the current light level or illuminance of the ambient light around the hosting device.

The AmbientLightSensor object has a property named illuminance on it, that returns the current light level in lux of the ambient light level around the hosting device.

It would only work on devices that have the ambient light sensor(hardware) on them(obviously). With the help of this AmbientLightSensor interface, our browsers can access the data collected by Ambient Light Sensors on devices. Cool, isn't it? 🤩

What does that mean for us? Well, you can think of illuminance as the luminous flux incident on a surface.

Now we know how to get the illuminance, and from the Illuminance Table we can determine whether the environment we're in is dark or light.

So, we'll consider the environment to be dark if illuminance <= 10(again, this number is totally up to you), light otherwise.

Using the AmbientLightSensor interface to access illuminance is pretty straightforward and the usage is mentioned in this example on the MDN Docs.

But there are a lot of other things that we need to take care of while using this interface. Let's go through them one by one.

Feature Detection 🕵🏻‍♂️:

This is to determine whether the browser that is running our App has the AmbientLightSensor feature on it or not. To detect this, we can simply check:

if ("AmbientLightSensor" in window) {
    // Yay! The Browser has what it takes
}

Handling Edge Cases:

Checking whether the browser supports a feature doesn't guarantee that everything will work as expected. There might be errors:

While instantiation the sensor.
While using it.
When the user's permissions might be required to use the sensor.
When the sensor type might not be supported by the device.

So all these scenarios would result in an error. So while using this interface, we'll have to cater to all these edge cases as well.

Now that we know what we're looking at, let's try to implement this in our App.

Using the `AmbientLightSensor` Web Interface

Reading the illuminance and handling all these edge cases is the major task that we should delegate to a service. So let's implement a service in Angular that will handle all these things for us.

The only output that we're going to expect from this service is an Observable that either gives us the illuminance or an error message that we could show to the user. So let's do this. I'll name this service AmbientLightSensorService.

Also, since this service would also rely on the window object, let's provide it as a value so that we could then inject it as a dependency in our AmbientLightSensorService.

So in our AppModule:

`app.module.ts`

...
import { AmbientLightSensorService } from "./ambient-light-sensor.service";

@NgModule({
  ...
  providers: [
    AmbientLightSensorService,
    {
      provide: Window,
      useValue: window,
    },
    ...
  ]
})
export class AppModule {}

There are also a lot of messages, error types, sensor policy and sensor name etc. that we are going to deal with. So let's also expose them as constants:

`common.const.ts`

export const SENSOR_NAME = "AmbientLightSensor";
export const SENSOR_POLICY_NAME = "ambient-light-sensor";
export const ACCESS_DENIED = "denied";
export const THEME_OPTIONS_URL = "/assets/options.json";
export const THEME_BASE_PATH = "node_modules/@angular/material/prebuilt-themes";
export const STYLE_TO_SET = "theme";
export const DARK_THEME = "pink-bluegrey";
export const LIGHT_THEME = "deeppurple-amber";

export const ERROR_TYPES = {
  SECURITY: "SecurityError",
  REFERENCE: "ReferenceError",
  NOT_ALLOWED: "NotAllowedError",
  NOT_READABLE: "NotReadableError"
};

export const ERROR_MESSAGES = {
  UNSUPPORTED_FEATURE: "Your browser doesn't support this feature",
  BLOCKED_BY_FEATURE_POLICY:
    "Sensor construction was blocked by a feature policy.",
  NOT_SUPPORTED_BY_USER_AGENT: "Sensor is not supported by the User-Agent.",
  PREMISSION_DENIED: "Permission to use the ambient light sensor is denied.",
  CANNOT_CONNECT: "Cannot connect to the sensor."
};

Hopefully, I've named these variables in a way that they are self-explanatory.

Now let's implement this service:

`ambient-light-sensor.service.ts`

import { ReplaySubject, Observable } from "rxjs";
import { Injectable } from "@angular/core";

import {
  SENSOR_NAME,
  SENSOR_POLICY_NAME,
  ACCESS_DENIED,
  ERROR_TYPES,
  ERROR_MESSAGES
} from "./common.const";

@Injectable()
export class AmbientLightSensorService {
  private illuminance: ReplaySubject <number> = new ReplaySubject <number>(1);
  illuminance$: Observable<number> = this.illuminance.asObservable();

  constructor(private window: Window) {
    try {
      if (SENSOR_NAME in window) {
        this.startReading();
      } else {
        this.illuminance.error(ERROR_MESSAGES.UNSUPPORTED_FEATURE);
      }
    } catch (error) {
      // Handle construction errors.
      if (error.name === ERROR_TYPES.SECURITY) {
        this.illuminance.error(ERROR_MESSAGES.BLOCKED_BY_FEATURE_POLICY);
      } else if (error.name === ERROR_TYPES.REFERENCE) {
        this.illuminance.error(ERROR_MESSAGES.NOT_SUPPORTED_BY_USER_AGENT);
      } else {
        this.illuminance.error(`${error.name}: ${error.message}`);
      }
    }
  }

  private startReading() {
    const sensor = new AmbientLightSensor();
    sensor.onreading = () => this.illuminance.next(sensor.illuminance);
    sensor.onerror = async event => {
      // Handle runtime errors.
      if (event.error.name === ERROR_TYPES.NOT_ALLOWED) {
        // Branch to code for requesting permission.
        const result = await navigator.permissions.query({
          name: SENSOR_POLICY_NAME
        });
        if (result.state === ACCESS_DENIED) {
          this.illuminance.error(ERROR_MESSAGES.PREMISSION_DENIED);
          return;
        }
        this.startReading();
      } else if (event.error.name === ERROR_TYPES.NOT_READABLE) {
        this.illuminance.error(ERROR_MESSAGES.CANNOT_CONNECT);
      }
    };
    sensor.start();
  }
}

The implementation caters to every edge case that we discussed in the previous section.

Basically, we've exposed the illuminance ReplaySubject<number> as the illuminance$ Observable<number>.

"Why a ReplaySubject<number>(1)?" you might ask. Well, because we don't have an initial value and so it would make more sense to use that instead of using BehaviorSubject<number>(null).

Now, we're pushing a new lux values down the illuminance ReplaySubject by calling the next method on it. And for the error cases, we're pushing out an error using the error method.

The method names and error message names are pretty self-explanatory as well. If something is still not clear, please comment down below so that I can elaborate more on it.

And so now that the service is ready, we can inject this service as a dependency in our HeaderComponent and leverage the illuminance$ Observable to get access to the lux value(or the error message).

`header.component.ts`

import { Component, OnDestroy, OnInit } from "@angular/core";
import { MatSnackBar } from "@angular/material/snack-bar";
import { Observable, Subject } from "rxjs";
import { takeUntil } from "rxjs/operators";

import { AmbientLightSensorService } from "../ambient-light-sensor.service";
import { DARK_THEME, LIGHT_THEME } from "../common.const";
import { Option } from "../option.model";
import { ThemeService } from "../theme.service";

@Component({
  selector: "app-header",
  templateUrl: "./header.component.html",
  styleUrls: ["./header.component.css"]
})
export class HeaderComponent implements OnInit, OnDestroy {
  options$: Observable<Array<Option>> = this.themeService.getThemeOptions();
  private unsubscribe$ = new Subject<void>();

  constructor(
    private readonly themeService: ThemeService,
    private readonly alsService: AmbientLightSensorService,
    private readonly snackBar: MatSnackBar
  ) {}

  ngOnInit() {
    this.themeService.setTheme(DARK_THEME);
    this.alsService.illuminance$
      .pipe(takeUntil(this.unsubscribe$))
      .subscribe(
        illuminance => {
          illuminance <= 10
            ? this.themeService.setTheme(DARK_THEME)
            : this.themeService.setTheme(LIGHT_THEME);
        },
        error => this.showMessage(error)
      );
  }

  themeChangeHandler(themeToSet) {
    this.themeService.setTheme(themeToSet);
  }

  ngOnDestroy() {
    this.unsubscribe$.next();
    this.unsubscribe$.complete();
  }

  private showMessage(messageToShow) {
    this.snackBar.open(messageToShow, "OK", {
      duration: 4000
    });
  }
}

So as you can notice:

We've now injected the AmbientLightSensorService as a dependency.
In the ngOnInit lifecycle hook, we're subscribeing to the Observable. From here:
- The success callback gets called with the illuminance value. Here we check the illuminance value:
  - If it is <= 10, then we set the DARK_THEME.
  - If it is > 10, then we set the LIGHT_THEME.
- The error callback gets called with the error message. From there, we're simply calling the showMessage method to show a snack bar.

Also, since we're subscribeing to the Observable this time around, we'll also have to explicitly do something to avoid any memory leaks. To do it, we go declarative by using the takeUntil operator.

Read more about this approach in this article on AngularInDepth by Tomas Trajan

And that's it. Our AmbientLightSensor Theme Switch is now ready. Let's test it out.

Trying it out 🧪

Before we do that, there's a caveat. And it has something to do with browser support.

As you can see above, browser support isn't that great at the moment. But we'll at least test this on the best browser in the world(ahem Chrome ahem).

To do that, we'll first have to enable a flag:

So I'll navigate to chrome://flags/#enable-generic-sensor-extra-classes and enable it on my phone(my laptop doesn't have Ambient Light Sensor on it). And then I'll restart the browser on my phone.

Let's now test this thing out:

And here's the final code:

Next Steps 👣

As of now, there's a slight issue in the App. What if the user doesn't want to change the theme automagically, based on the lighting conditions? We can add in a simple fix as a settings/preference menu asking to turn this behavior ON/OFF and switch the theme only when the behavior is turned ON.

Give it a try and implement the Preference/Settings Menu and then only switch the theme if the user has switched this auto-theme-switch behavior on.

Closing Notes 🎉

Awwww! You're still here? Thanks for sticking around. I hope you liked it.

I’m extremely grateful to Martina Kraus, and Rajat Badjatya for taking the time to proofread it and providing all the constructive feedback in making this article better.

I hope this article has taught you something new related to Angular and Web in general. If it did, hit that 🧡/🦄 icon, and add it to your reading list(🔖). Also, share this article with your friends who are new to Angular/Web and want to achieve something similar.

Please stay tuned while I work on uploading a video version of this article. 📺

Icon Courtesy: Angular Material by AngularIO Press Kit | CSS by monkik from the Noun Project | Light sensor by Adnen Kadri from the Noun Project

Until next time then. 👋🏻

Let's implement a Theme Switch 🎨 like the Angular Material Site

Siddharth Ajmera 🇮🇳 — Thu, 19 Mar 2020 12:58:36 +0000

DISCLAIMER: While I write this article, I'll try to be as vocal as I can about how I implement something. So hopefully, if you're new to Angular or have just started, you should get by just fine. If there's still an issue understanding anything here, please feel to comment on this article about it. I'll be more than happy to elaborate more on it.🙂

That said, this article is mainly intended for beginners. I've added a TL;DR; below 👇🏻 as a precautionary measure, in case you're a more advanced Angular Developer. Please feel free to navigate to a heading that might interest you more.

TL;DR;

Why a Theme Switch? 🤷🏻‍♂️
The Setup 🧩
- Implementing the HeaderComponent
- Implementing the MenuComponent
Implementing the Theme Switch 🎨
- How Angular Material Website does it? 🤔
- Our Implementation
Next Steps 👣
Closing Notes 🎉

Why a Theme Switch? 🤷🏻‍♂️

Alright! So Dark Mode is a not so new cool feature. Most of the websites out there are implementing it as custom themes in their Apps.

And why wouldn't they do that, right? Dark Mode is awesome! It's easier on the eyes, better in terms of power consumption, and can provide an excellent user experience(especially in low-lighting conditions)

Yeah! You heard me. Low-lit ambiances are the best suited for Dark Mode. I mean, nobody's stopping you from changing to Dark Mode even in well-lit environments. But still, Dark Mode is easier on the eyes and makes more sense IN THE DARK.(see what I did there? 😉)

Also, I mentioned Dark Mode as a way to enhance UX right? Well, there are multiple aspects to it. It's always better to offer users a way to customize the look and feel of your Apps, without compromising with your design language. And most of the Web Apps(or Apps, in general), do that via themes.

The other aspect might look more or less like a gimmick to some of you. But you can take the UX of your Web App, to the next level, by intelligently switching themes, based on the ambient lighting conditions that the user is in. I'll get back to this later.

One of my favorite websites, that implement Themes is the Angular Material Site. You might have seen this switch that lets you change the theme on the website.

We'll pretty much replicate the same effect in our Angular App. So without further ado, let's get started.

The Setup 🧩

I've set-up Angular Material on StackBlitz that you can use as a starter template:

From here on, let's add a few Angular Material Components that we can use to see something on the UI. I'll add a toolbar, an icon on it, a menu for theme options, and a button.

Since all these Angular Material Components will be used in my AppModule, it would make sense to create a separate AppMaterialModule that re-exports all the Material related modules from it.

`app-material.module.ts`

...
import { MatButtonModule } from "@angular/material/button";
import { MatIconModule } from "@angular/material/icon";
import { MatMenuModule } from "@angular/material/menu";
import { MatToolbarModule } from "@angular/material/toolbar";
...

@NgModule({
  exports: [
    MatButtonModule,
    MatIconModule,
    MatMenuModule,
    MatToolbarModule,
  ]
})
export class AppMaterialModule {}

And now I can add the AppMaterialModule to the imports array of my AppModule.

`app.module.ts`

...
import { AppMaterialModule } from "./app-material.module";
...

@NgModule({
  imports: [
    ...
    AppMaterialModule,
    ...
  ],
  ...
})
export class AppModule {}

NOTE: I'm doing this in here because I will be using all the Angular Material Components exposed by these Angular Material Modules in my AppModule. This would not make much sense in a Real-World Application as we would generally not use all the Angular Material Components in all our Modules. So creating a single AppMaterialModule and then importing it in every Angular Module that you create can lead to performance hits. So you might want to avoid that in such cases.

Moving on, I should now be able to use these Angular Material Components in my App. The look that I'm going for is really simple. THIS 👇🏻

Judging from the image above, we need a HeaderComponent, a MenuComponent that opens upon clicking the 🎨 icon and the rest would already be accommodated by our Sample StackBlitz.

Implementing the `HeaderComponent`:

I plan to make this a smart component.

ASIDE: You can learn more about the Smart and Dumb Component Pattern from this Video 📺 by Stephen Fluin

Alright, now continuing with our HeaderComponent, it needs to pass on some options for the menu to the MenuComponent. Each option would have things like, backgroundColor, buttonColor, & headingColor for the icon to show on each menu item; and a label, and a value corresponding to each label.

Now we do know that Angular Material has 4 such pre-built themes named:

deeppurple-amber.css
indigo-pink.css
pink-bluegrey.css
purple-green.css

So we'll need 4 items for options. To avoid hard-coding of these options in the component itself, I'll just expose this data as a json file and store it in the assets folder in a file named options.json. Doing that will allow me to fetch it with path /assets/options.json

This file would look something like this:

`options.json`

[
  {
    "backgroundColor": "#fff",
    "buttonColor": "#ffc107",
    "headingColor": "#673ab7",
    "label": "Deep Purple & Amber",
    "value": "deeppurple-amber"
  },
  {
    "backgroundColor": "#fff",
    "buttonColor": "#ff4081",
    "headingColor": "#3f51b5",
    "label": "Indigo & Pink",
    "value": "indigo-pink"
  },
  {
    "backgroundColor": "#303030",
    "buttonColor": "#607d8b",
    "headingColor": "#e91e63",
    "label": "Pink & Blue Grey",
    "value": "pink-bluegrey"
  },
  {
    "backgroundColor": "#303030",
    "buttonColor": "#4caf50",
    "headingColor": "#9c27b0",
    "label": "Purple & Green",
    "value": "purple-green"
  }
]

NOTE: Considering that this data was exposed as a REST API, I can then fetch it using HttpClient in my App. And that's what I'll be doing in this article.

ALTERNATIVELY, you can also leverage it as a static asset instead of exposing this data via a REST API. If you do that, you can import it directly in the HeaderComponent using import options from 'path-to-options.json'.

You'll just have to set resolveJsonModule, and esModuleInterop to true in the compilerOptions, in your tsconfig.app.json/tsconfig.json. I have an implementation for this version in this Sample StackBlitz just in case you're interested. 🙂

Okay. Let's carry on. Now, since I also have the structure of the option Object, I can create an interface for static typing. Let's store it in a file named option.model.ts:

`option.model.ts`

export interface Option {
  backgroundColor: string;
  buttonColor: string;
  headingColor: string;
  label: string;
  value: string;
}

Perfect! Now the responsibility of the HeaderComponent is to:

Render the header(Obviously! 🤷🏻‍♂️)
Fetch the options and give it to the MenuComponent.

But we do need to also change the theme at some point. So it's better that we abstract the whole business logic related to themes in a service that I'd call ThemeService. So let's implement that first:

`theme.service.ts`

import { Injectable } from "@angular/core";
import { HttpClient } from "@angular/common/http";
import { Observable } from "rxjs/Observable";

import { Option } from "./option.model";

@Injectable()
export class ThemeService {
  constructor(
    private http: HttpClient,
  ) {}

  getThemeOptions(): Observable<Array<Option>> {
    return this.http.get<Array<Option>>("assets/options.json");
  }

  setTheme(themeToSet) {
    // TODO(@SiddAjmera): Implement this later
  }
}

Sweet! We can now inject this service as a dependency in the HeaderComponent which would look something like this:

`header.component.ts`

import { Component, OnInit } from "@angular/core";
import { Observable } from "rxjs/Observable";

import { Option } from "../option.model";
import { ThemeService } from "../theme.service";

@Component({
  selector: "app-header",
  templateUrl: "./header.component.html",
  styleUrls: ["./header.component.css"]
})
export class HeaderComponent implements OnInit  {
  options$: Observable<Array<Option>> = this.themeService.getThemeOptions();

  constructor(private readonly themeService: ThemeService) {}

  ngOnInit() {
    this.themeService.setTheme("deeppurple-amber");
  }

  themeChangeHandler(themeToSet) {
    this.themeService.setTheme(themeToSet);
  }
}

As you can see, the HeaderComponent is also responsible for changing the theme now.

And the template would look like this:

`header.component.html`

<mat-toolbar color="primary">
  <mat-toolbar-row>
    <span>Dora</span>
    <span class="spacer"></span>
    <app-menu 
      [options]="options$ | async"
      (themeChange)="themeChangeHandler($event)">
    </app-menu>
  </mat-toolbar-row>
</mat-toolbar>

Notice how instead of subscribeing to the options$ Observable in the Component Class, we've used the async pipe to unwrap it. This is a pattern that makes Angular reactive and as far as possible, you should follow this pattern. Once we get the options, we can then pass it as an input to the MenuComponent's options @Input property.

Also, since the responsibility of changing the theme is also taken up by the HeaderComponent, we can implement the MenuComponent as a dumb/presentational component. So let's do that now.

Implementing the `MenuComponent`:

So now we can tell that the MenuComponent would accept options as an @Input and then iterate through them to render these options. We can also clearly see that it has a themeChange @Output property that calls the handler with the newly selected theme. So we can implement the MenuComponent Class like this:

`menu.component.ts`

import { Component, EventEmitter, Input, Output } from "@angular/core";

import { Option } from "../option.model";
import { ThemeService } from "../theme.service";

@Component({
  selector: "app-menu",
  templateUrl: "./menu.component.html",
  styleUrls: ["./menu.component.css"]
})
export class MenuComponent {
  @Input() options: Array<Option>;
  @Output() themeChange: EventEmitter<string> = new EventEmitter<string>();

  constructor(private themeService: ThemeService) {}

  changeTheme(themeToSet) {
    this.themeChange.emit(themeToSet);
  }
}

And the template would look something like this:

`menu.component.html`

<mat-icon
  class="icon" 
  [matMenuTriggerFor]="menu">
  palette
</mat-icon>
<mat-menu #menu="matMenu">
  <button
    *ngFor="let option of options"
    mat-menu-item
    (click)="changeTheme(option.value)">
    <mat-icon
      role="img" 
      svgicon="theme-example"
      aria-hidden="true">
      <svg
        xmlns="http://www.w3.org/2000/svg" 
        xmlns:xlink="http://www.w3.org/1999/xlink" 
        width="100%" 
        height="100%"
        viewBox="0 0 80 80" 
        fit="" 
        preserveAspectRatio="xMidYMid meet" 
        focusable="false">
        <defs>
          <path
            d="M77.87 0C79.05 0 80 .95 80 2.13v75.74c0 1.17-.95 2.13-2.13 2.13H2.13C.96 80 0 79.04 0 77.87V2.13C0 .95.96 0 2.13 0h75.74z"
            id="a">
          </path>
          <path
            d="M54 40c3.32 0 6 2.69 6 6 0 1.2 0-1.2 0 0 0 3.31-2.68 6-6 6H26c-3.31 0-6-2.69-6-6 0-1.2 0 1.2 0 0 0-3.31 2.69-6 6-6h28z"
            id="b">
          </path>
          <path d="M0 0h80v17.24H0V0z" id="c"></path>
        </defs>
        <use xlink:href="#a" [attr.fill]="option.backgroundColor"></use>
        <use xlink:href="#b" [attr.fill]="option.buttonColor"></use>
        <use xlink:href="#c" [attr.fill]="option.headingColor"></use>
      </svg>
    </mat-icon>
    <span>{{ option.label }}</span>
  </button>
</mat-menu>

Alright! Now we have everything in place. We just need a way to switch themes. How do we do that?

Implementing the Theme Switch 🎨

This is the final piece of the puzzle. And we can do this in several different ways. But the Angular Material Website has already implemented this right? And the good thing is, it's open-source. So we do have access to the source code.

So instead of trying to re-invent the wheel, I'm going to cheat a little bit and see how Angular Material Docs App did it.

How Angular Material Website does it? 🤔

If you check the actual implementation, they have implemented something called a ThemePicker. This is what we see at the top-right, in the header.

This(as the name suggests) is responsible for switching the theme on the website. This component calls a service called StyleManager.

What does this service do, you might ask. Well, when you change the theme from the ThemePicker it:

Checks whether there's a link tag on the HTML Document with a class attribute, the value of which is: style-manager-theme:
- If there isn't such a link tag, it adds this link tag to the head of the document, and then set the href property with the selected theme path on it.
- If there is such a link tag, it then, it simply sets the href property on this link tag to the selected theme path.

Great, now that we understand what the StyleManager does, I can just copy the StyleManager service in my project. Once I do that, I can just inject this in my ThemeService and call the setStyle method from it with the appropriate values and it should ideally work.

So let's try it out.

Our Implementation

I'll first copy the style-manager.ts in a file named style-manager.service.ts:

`style-manager.service.ts`

/**
 * Copied from https://github.com/angular/material.angular.io/blob/master/src/app/shared/style-manager/style-manager.ts
 * TODO(@SiddAjmera): Give proper attribution here
 */

import { Injectable } from "@angular/core";

@Injectable()
export class StyleManagerService {
  constructor() {}

  /**
   * Set the stylesheet with the specified key.
   */
  setStyle(key: string, href: string) {
    getLinkElementForKey(key).setAttribute("href", href);
  }

  /**
   * Remove the stylesheet with the specified key.
   */
  removeStyle(key: string) {
    const existingLinkElement = getExistingLinkElementByKey(key);
    if (existingLinkElement) {
      document.head.removeChild(existingLinkElement);
    }
  }
}

function getLinkElementForKey(key: string) {
  return getExistingLinkElementByKey(key) || createLinkElementWithKey(key);
}

function getExistingLinkElementByKey(key: string) {
  return document.head.querySelector(
    `link[rel="stylesheet"].${getClassNameForKey(key)}`
  );
}

function createLinkElementWithKey(key: string) {
  const linkEl = document.createElement("link");
  linkEl.setAttribute("rel", "stylesheet");
  linkEl.classList.add(getClassNameForKey(key));
  document.head.appendChild(linkEl);
  return linkEl;
}

function getClassNameForKey(key: string) {
  return `app-${key}`;
}

Great. So now that I have this service in place, as planned, I'll inject this service as a dependency in my ThemeService and implement the setTheme method:

theme.service.ts

...
import { StyleManagerService } from "./style-manager.service";

@Injectable()
export class ThemeService {
  constructor(
    ...
    private styleManager: StyleManagerService
  ) {}

  ...

  setTheme(themeToSet) {
    this.styleManager.setStyle(
      "theme",
      `node_modules/@angular/material/prebuilt-themes/${themeToSet}.css`
    );
  }
}

All I'm doing here is calling the setStyle method from the StyleManagerService with the name of the style key(theme in this case), and the value of the href attribute that it has to set.

The setStyle method, again, either creates a new link tag and then sets the href attribute on it; or updates the href attribute on a pre-existing link tag.

And that's pretty much it. This 👇🏻 is what our final code looks like.

Purrfect! We now have a theme switch, just like the one on the Angular Material Website. And it works as expected 😍

Next Steps 👣

This is all great. But wouldn't it be awesome if our App could automatically switch themes based on the ambient light?🤔 Well, that's exactly what we're going to do in the next article.

Can't wait? You can read it now. Here's the link:

Switch themes like a fox 🦊 based on Ambient Light 💡 in your Angular Apps

Siddharth Ajmera 🇮🇳 for Angular ・ Mar 23 '20

#angular #typescript #javascript #webdev

Closing Notes 🎉

Awwww! You're still here? Thanks for sticking around. I hope you liked it.

I’m extremely grateful to Martina Kraus, and Rajat Badjatya for taking the time to proofread it and providing all the constructive feedback in making this article better.

I hope this article has taught you something new related to Angular. If it did hit that 🧡/🦄 icon, and add it to your reading list(🔖). Also, share this article with your friends who are new to Angular and want to achieve something similar.

Please stay tuned while I work on uploading a video version of this article. 📺

Icon Courtesy: AngularIO Press Kit | CSS by monkik from the Noun Project

Until next time then. 👋🏻

Forem: Siddharth Ajmera 🇮🇳

Trigger Native Share Intent : Share text, url and files using JavaScript

In Angular:

In React:

In Svelte:

In Vue:

Switch themes like a fox 🦊 based on Ambient Light 💡 in your Angular Apps

Siddharth Ajmera 🇮🇳 for Angular ・ Mar 23 '20 ・ 9 min read

We hosted a successful India-wide Angular Fundamentals Workshop with ngGirls 👩‍💻

The motivation 🔥

ngGirls@Indore (where it all started) 👶

ngGirls@Australia (playing with scale) 🦘

ngGirls@India 🇮🇳

The Volunteers 💪

The Mentors 👨‍🏫👩‍🏫

The Keynote Speakers 🎤

Participants 👩‍💻

Where to from here?

All About Web(The Genesis) 🚀

Relevant Links to help you find us:

Implement Google Sign-In(OAuth) in your Angular App in under 15 minutes 🚀

TL;DR;

Don't like reading? 😵

Project Overview 🔭

Setting up a Firebase Project 🔥

Setting up an Angular App 🅰

Install the latest version of Angular CLI using:

Setting up AngularMaterial:

Migrate Theme paths from angular.json to styles.scss

Creating an AppMaterialModule:

app-material.module.ts

Setting up AngularFire:

Creating an AppFirebaseModule:

environment.ts

app-firebase.module.ts

Implementing the Angular App

create.component.html:

feed.component.html:

auth.service.ts:

header.component.ts:

header.component.html:

profile-card.component.ts:

profile-card.component.html:

Bringing it all together with Routing 🗺

app-routing.module.ts:

SiddAjmera / KittyGramAuth

This respository demonstrates the authentication and authorization that we have in KittyGram

KittyGramAuth

Development server

Code scaffolding

Build

Running unit tests

Running end-to-end tests

Further help

Next Steps 👣

Implement file upload with Firebase Storage 🔥 in our Angular App: The simple way

Martina Kraus for Angular ・ Apr 26 '20

Closing Notes 🎉

Martina KrausFollow

Switch themes like a fox 🦊 based on Ambient Light 💡 in your Angular Apps

Let's implement a Theme Switch 🎨 like the Angular Material Site

Siddharth Ajmera 🇮🇳 for Angular ・ Mar 19 '20

TL;DR;

Why Dark Theme in the Dark? 🤷🏻‍♂️

Determining when it's dark ⚡

Enter: the AmbientLightSensor Web Interface 📡

Feature Detection 🕵🏻‍♂️:

Handling Edge Cases:

Using the AmbientLightSensor Web Interface

app.module.ts

common.const.ts

ambient-light-sensor.service.ts

header.component.ts

Trying it out 🧪

Next Steps 👣

Closing Notes 🎉

Let's implement a Theme Switch 🎨 like the Angular Material Site

TL;DR;

Why a Theme Switch? 🤷🏻‍♂️

The Setup 🧩

Migrate Theme paths from `angular.json` to `styles.scss`

Creating an `AppMaterialModule`:

`app-material.module.ts`

Creating an `AppFirebaseModule`:

`environment.ts`

`app-firebase.module.ts`

`create.component.html`:

`feed.component.html`:

`auth.service.ts`:

`header.component.ts`:

`header.component.html`:

`profile-card.component.ts`:

`profile-card.component.html`:

`app-routing.module.ts`:

Enter: the `AmbientLightSensor` Web Interface 📡

Using the `AmbientLightSensor` Web Interface

`app.module.ts`

`common.const.ts`

`ambient-light-sensor.service.ts`

`header.component.ts`

`app-material.module.ts`

`app.module.ts`

Implementing the `HeaderComponent`:

`options.json`

`option.model.ts`

`theme.service.ts`

`header.component.ts`

`header.component.html`

Implementing the `MenuComponent`:

`menu.component.ts`

`menu.component.html`

`style-manager.service.ts`