Use microsoft Graph Toolkit con Angular

Los componentes Graph Toolkit Microsoft funcionan muy bien con marcos web como Angular además de JavaScript y HTML de vainilla. En este tema se describe cómo usar microsoft Graph Toolkit con Angular. Para obtener un tutorial paso a paso que describe cómo crear una nueva aplicación Angular y usar Microsoft Graph Toolkit, vea Using Microsoft Graph Toolkit with Angular.

Agregar el Graph Toolkit

En primer lugar, debe habilitar elementos personalizados en la Angular mediante la CUSTOM_ELEMENT_SCHEMA adición de la @NgModule() decorator entrada app.module.ts . En el ejemplo siguiente se muestra cómo hacerlo:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule],
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}

A continuación, agregue el Graph Toolkit Microsoft al proyecto instalando el paquete npm con:

npm install @microsoft/mgt

Inicializar un proveedor

Los proveedores del Kit de herramientas de Microsoft Graph permiten la autenticación y el acceso a Microsoft Graph para los componentes. Para más información, vea Usar los proveedores. El proveedor que use depende del contexto en el que se usará la solución.

En el ejemplo siguiente se muestra cómo agregar el proveedor MSAL2,pero puede seguir el mismo modelo con cualquiera de los proveedores.

Nota

Si actualmente usa el proveedor de MSAL y desea actualizar al proveedor de MSAL2, siga los pasos descritos en el artículo MSAL2 Provider.

Importe el proveedor y estadíclo para que se inicialice cuando se inicialice la aplicación. Reemplace <YOUR-CLIENT-ID> por el identificador de cliente de la aplicación.

import { Component, OnInit } from '@angular/core';
import { Providers, Msal2Provider } from '@microsoft/mgt';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {

    ngOnInit()
    {
        Providers.globalProvider = new Msal2Provider({
            clientId: '<YOUR-CLIENT-ID>'
        });
    }
}

Crear un identificador de aplicación o cliente

Para obtener un identificador de cliente, debe registrar la aplicación en Azure AD.

Agregar componentes

Ahora, puede usar cualquiera de los componentes de Microsoft Graph Toolkit como lo haría normalmente en las plantillas HTML. Por ejemplo, para agregar el componente Person, agregue lo siguiente a la plantilla:

<mgt-person person-query="me" view="twolines"></mgt-person>

Personalizar componentes con Angular

Todos los Graph Toolkit microsoft admiten plantillaspersonalizadas, lo que permite modificar el contenido de un componente. La sintaxis predeterminada para personalizar los componentes es usar llaves dobles para hacer referencia a los datos de propiedad de cada uno de los elementos devueltos, como se muestra:

<!-- Double braces are used for data binding in Angular. This will throw an error. -->
<mgt-agenda>
    <template data-type="event">
        <div>{{event.subject}}</div>
    </template>
</mgt-agenda>

En Angular, sin embargo, se usan llaves dobles para el enlace de datos y el compilador de Angular producirá un error si intenta usar la sintaxis de doble llave.

Puede evitar estos errores cambiando los caracteres predeterminados usados por el Toolkit a algo distinto de las llaves dobles mediante el uso de TemplateHelper . Es mejor hacerlo en el componente de aplicación de nivel superior para que se aplique globalmente.

Importe y TemplateHelper use el método para establecer la .setBindingSyntax() sintaxis de enlace personalizada.

import { Component, OnInit } from '@angular/core';
import { Providers, Msal2Provider, TemplateHelper } from '@microsoft/mgt';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {

    ngOnInit()
    {
        Providers.globalProvider = new Msal2Provider({ clientId: '<YOUR-CLIENT-ID>'})
        TemplateHelper.setBindingSyntax('[[',']]');
    }
}

Ahora, puede usar la sintaxis de enlace personalizada para definir plantillas personalizadas.

<mgt-agenda>
    <template data-type="event">
        <div>[[event.subject]]</div>
    </template>
</mgt-agenda>

Pasos siguientes