401 Error While Accessing Youtube API From Angular Component

I am working on an Angular app, where I get a list of Youtube Videos using the YouTube API. Below is the service I created to consume the API.

import { Injectable } from '@angular/core';import { HttpClient } from '@angular/common/http';import {from, Observable, of} from 'rxjs';import {first, map} from 'rxjs/operators';@Injectable({  providedIn: 'root'})export class YoutubeService {    apiKey = 'AIzaSy...';    constructor(private http: HttpClient) {    }    getMessage(): string {        return 'Hello World!';    }    getVideosForChannel(channel: string, maxResults: number): Observable<object> {        const url = 'https://www.googleapis.com/youtube/v3/search?key='+ this.apiKey +'&channelId='+ channel +'&order=date&part=snippet &type=video,id&maxResults='+ maxResults;        return this.http.get(url)          .pipe(map((res) => {            return res;          }));    }}

To display the list of videos on the component, I'm using the following code

this.youtubeService.getVideosForChannel('UCl7379cd3Pv81tySqs0TR7A', 10)      .subscribe(list => {        for (let item of list['items']) {          console.log(item);          this.videos.push(item);        }      });

The problem is I'm having the following error message:

HttpErrorResponse {headers: HttpHeaders, status: 401, statusText: "OK", url: "https://www.googleapis.com/youtube/v3/search?key=A…=date&part=snippet%20&type=video,id&maxResults=10", ok: false, …}

Can someone help me with the error? Thanks