Angular Tutorial

Angular Tutorial for Beginners – Part 4 : Interfaces

Tuba Mansoor
Latest posts by Tuba Mansoor (see all)

This is part 4 of the Angular Tutorial for Beginners series.

A printable version of this article can be found here.

Part 1 of this series discussed how to get started with Angular.

Part 2 discussed about the basic tenets of Angular Modules, Components and Directives.

Part 3 discusses data binding.

Part 4 here builds up on the demo used in the earlier parts to explain the concept of interface. Hence it is strongly advised that you go through them before proceeding.

Interfaces in Typescript provide type checking. Here we have defined an array of any as below. But this does not provide any type checking.

For type checking we will create, an interface of employee as below.

See also  Angular Interview Questions for Beginners

We will create typescript file employee.ts and export an interface as below.

Angular Tutorial
export interface IEmployee{ 
employeeId : number; 
employeeName : string; 
projectId : number 
}

Let’s import the employee.ts in employee.component.ts.

Now we replace the array of any with an array of IEmployee in employee.component.ts as below.

Angular Tutorial

Using an interface like IEmployee will provide me with a type checking. If I write ’employeeNames’ instead of ’employeeName’, I will be notified immediately as below. So, this helps in compile time checking and helps me to catch errors earlier on.

Angular Tutorial

So, what if we use a class instead of an interface for type checking. There is no concept of interfaces in JavaScript. Hence when interfaces are transpiled, there is no code generated. But if we use classes, Javascript code is generated. Using interface, you can avoid this extra javascript code. If you only need to perform type checking, then using interfaces instead of classes is good option. is a good read to know more about Typescript classes & interfaces.

In the next part of the Angular tutorial for Beginners series we will learn how to use services in angular.

Contents of the Angular tutorial for Beginners series:

Part 1: Getting Started

Part 2: Modules, Components & Directives in Angular.

Part 3: Data binding in angular.

See also  BenchmarkDotNet: Advanced Features

Part 4 : Interfaces

Part 5: Services in Angular

Part 6: Http Requests with Observables.

Part 7: Pipes in Angular

Part 8 :Nesting Components in Angular

Part 9: Routing in Angular

2 comments

  1. Hello Tuba,

    I am new to angular 6, I have one issue , we use MSAL authentication, I need to access graphAPI,
    We are using MSAL authentication in angular, here is the config .ts file

    export const authConfig = {
    //authority: ‘https://login.microsoftonline.com/5ced40db-2fc3-4ef1-b1b3-48b4e94668f5’,
    //clientID: ‘2f93b081-7abe-490c-ace5-eeeb111a42b0’,
    //clientID: ‘934e7127-1aba-4835-9325-57d80d112f75’,
    clientID: ‘7c8bb28b-0a85-4c75-8112-194fb5b5946a’,
    authority: ‘https://login.microsoftonline.com/mindtreeonline.onmicrosoft.com’,
    /* endpoints:{
    ‘https://graph.windows.net’: ‘00000002-0000-0000-c000-000000000000’,
    ‘https://graph.microsoft.com’: ‘https://graph.microsoft.com’
    }, */
    //clientID: ‘4d53b2c4-3bd4-4645-a3ef-da39ab474c2a’,
    //redirectUri: ‘https://apsis-dev-ui.azurewebsites.net’,
    // redirectUri: ‘https://apsis-dev.azurewebsites.net’,
    redirectUri: ‘http://localhost:4200’,
    scopes: [‘People.Read.All’],
    // People.Read.All – Requires an Administrator to grant this permission
    protectedResourceMap : [[‘https://graph.windows.net’,[‘00000002-0000-0000-c000-000000000000’]],[‘https://graph.microsoft.com’,[‘People.Read.All’]]]

    };

    This is being called in request.service.ts

    @param learnerMid
    */
    getUserImage(MId): Observable {

    const Url =’https://graph.windows.net/mindtree.com/users’
    +
    ‘/’ +
    MId +
    ‘@mindtree.com/thumbnailPhoto?api-version=1.6’;
    return this.http
    .get(Url, { responseType: ‘blob’ })
    .pipe(catchError((error: any) => {
    return throwError(error)
    }));
    }

    This service is being invoked in
    public ngOnInit() {
    this.requestId = this.storageHelperService.getItemFromLocal(‘requestId’);

    this.loadRequestDetails(this.requestId);
    this.getUserImage(‘M1011212’);

    }

    getUserImage(learnerMid)
    {
    console.log(“entered into getUserImage method”)
    this.imageLoaded=false;
    this.requestService.getUserImage(learnerMid).subscribe(

    data=>
    {

    this.graphUserImage=data;
    this.imageUrl=this.createImageURL(this.graphUserImage);
    this.imageLoaded=true;
    }
    );

    console.log(“service getUserImage method”)
    }

    createImageURL(imageBlob)
    {
    const imageUrl=this._window.URL.createObjectURL(imageBlob);
    return this.sanitizer.bypassSecurityTrustUrl(imageUrl);
    console.log(“Image URL”);

    }

    I am getting the err Unauthorised, how to access graphAPI url via MSAL authentication

    1. Hi Uma,
      Unfortunately I am not too familiar with using graphAPI or MSAL authentication. Sorry, but I won’t be able to help you out here.

      Thanks,
      Tuba

Comments are closed.