Como Criar um Aplicativo no App Builder com API Baseada em Funções

Neste emocionante tutorial, levaremos suas habilidades para o próximo nível ao combinar duas ferramentas poderosas – a API que construímos em nosso tutorial anterior e a plataforma App Builder™. Ao fazer isso, criaremos um aplicativo totalmente funcional e personalizável que pode ser usado em uma variedade de plataformas.

App Builder é uma ferramenta poderosa que permite aos usuários criar aplicativos robustos com experiência mínima em codificação. Com sua interface amigável, você pode facilmente arrastar e soltar diferentes elementos para criar um aplicativo polido e de aparência profissional em nenhum tempo e gerar o código para ele em Angular, Blazor ou Web Components.

Experimente App Builder Experimente App Builder Experimente App Builder

Solicitar Demonstração

Criando seu Primeiro Aplicativo no App Builder com Código Baixo

Para começar, inicie o App Builder e selecione “Criar Novo Aplicativo”. Em seguida, navegue até a seção “Aplicativos de Amostra” e escolha o Painel de RH como o design base para seu projeto. A partir daí, você pode estender e personalizar o design para atender às suas necessidades específicas.

Ao abrir a amostra, você notará que várias páginas já foram criadas para você. No entanto, para se adequar melhor aos requisitos do seu projeto, você precisará fazer modificações em algumas dessas páginas e criar novas também.

Agora, vamos criar as páginas de login e registro. Navegue até a aba “Exibições” e selecione o ícone de adição para criar uma nova página que chamaremos de “Página de Registro”.

Para manter a consistência, podemos reutilizar o fundo da página Mestre para a página de Registro também. Precisaremos adicionar um layout de coluna. Dentro deste layout, incluiremos um título com o conteúdo de Registro e cinco campos de entrada junto com um botão. É importante observar que todos os campos de entrada devem ser obrigatórios e devem ter o tipo apropriado especificado.

A seguir, podemos criar a tela de Login. Esta tela exigirá apenas dois campos de entrada – um para email e outro para senha. Para simplificar o processo, podemos duplicar a página de Registro e remover quaisquer elementos desnecessários.

Após ambas as páginas terem sido criadas, podemos adicionar links para cada página sob os botões de envio.

A página inicial apresentará o painel, que exibirá todos os eventos que o usuário atual está participando em componentes de cartão. Se o usuário tiver uma função de Administrador, ele também verá uma grade com todos os eventos na plataforma, permitindo que ele execute operações CRUD conforme necessário.

Avançando, criaremos uma página para adicionar novos eventos. Esta página será acessível apenas para usuários com uma função de Administrador, mas cobriremos isso mais tarde no tutorial. Para cada evento, exigiremos um título, categoria, emails dos usuários participantes e a data do evento.

Além disso, precisaremos criar uma página semelhante para alterar as funções dos usuários. Semelhante à página de evento, este recurso será acessível apenas para Administradores. Para os fins desta demonstração, suportaremos apenas a concessão de permissões de Administrador a outros usuários.

Após a criação de todas as nossas páginas, podemos vinculá-las à navegação da barra lateral.

Sem Necessidade de Conectar a API Manualmente

Felizmente, conectar manualmente nossa API é desnecessário, pois podemos fazer isso diretamente através do App Builder, enviando-a como uma fonte de dados. Primeiro, devemos garantir que nossa API está em execução, então navegue até a aba Fontes de Dados, selecione o ícone de adição e escolha API REST. A partir daí, temos duas opções:

1. Para adicionar uma definição Swagger
2. Ou usar URL JSON

Para nossos fins, usaremos a abordagem Swagger e adicionaremos a URL.

Precisaremos especificar um nome para a fonte de dados e prosseguir para a próxima etapa. Em seguida, devemos identificar quais endpoints desejamos incluir. Para esta demonstração, selecionaremos todos os endpoints disponíveis. No entanto, é importante observar que todos os endpoints para Eventos exigem autorização para funcionar. Portanto, precisamos obter um token JWT de um usuário na API e adicioná-lo à aba de autorização.

Mais adiante no tutorial, substituiremos isso pelo token do usuário atual. Após a autorização ser definida, podemos prosseguir para Selecionar Dados, garantir que todos os campos sejam selecionados e clicar em Concluído.

Após a fonte de dados ter sido enviada com sucesso, podemos prosseguir para conectar a grade na página do painel. Primeiro, selecione a grade e atualize a fonte de dados do campo Dados. A partir daí, podemos adicionar operações de atualização e exclusão que serão vinculadas aos endpoints em nossa API, permitindo modificação de dados ao vivo através de interações com a grade.

Após todas as páginas terem sido criadas, podemos visualizar o aplicativo selecionando o botão verde localizado no canto superior direito. Em seguida, precisamos baixar o aplicativo para facilitar personalização adicional.

Executar o Aplicativo Criado Localmente

Após o aplicativo ter sido baixado, descompacte o projeto e abra-o no Visual Studio Code. No terminal, execute “npm install” seguido por “npm run start” para começar a executar o aplicativo.

O próximo passo é conectar as páginas de login e registro com nossa API. Para fazer isso, devemos adicionar funções que chamarão a API. Essas funções devem ser adicionadas ao arquivo services/hrdashboard.service.ts onde todos os nossos serviços são armazenados. Devemos adicionar mais duas funções, uma para login e outra para registro.

…
public registerUser(data: any, contentType: string = 'application/json-patch+json, application/json, text/json, application/*+json') {
    const options = {
    headers: {
        'content-type': contentType
    }
};
const body = data;
    return this.http.post(`${API_ENDPOINT}/Auth/Register`, body, options);
}
  public loginUser(data: any, contentType: string = 'application/json-patch+json, application/json, text/json, application/*+json') {
    const options = {
      headers: {
        'content-type': contentType
      }
    };
    const body = data;
    return this.http.post(`${API_ENDPOINT}/Auth/Login`, body, options);
  }
…

Na próxima etapa, navegue até o arquivo register-page.component.ts e adicione ligações para as propriedades de entrada. Crie uma variável para armazenar mensagens de erro e mostre validações ao usuário se a solicitação for malsucedida. Além disso, adicione uma função que será acionada quando o formulário for enviado. Esta função verificará se todos os campos são obrigatórios e, se assim for, armazenará o token JWT em localStorage e navegará para a página inicial. Se algum campo estiver faltando, a função deve exibir uma mensagem de erro ao usuário.

export class RegisterPageComponent {
  email: number;
  firstName: string;
  lastName: string;
  password: string;
  confirmedPassword: string;
  errorMessage: string;
 
  constructor(
    private hRAPIService: HRAPIService,
    private router: Router
  ) { }
  onSubmit(event) {
    event.preventDefault();
    if (this.password !== this.confirmedPassword) {
      this.errorMessage = 'Passwords should match!'
    }
    else if (this.email && this.firstName && this.lastName && this.password) {
      this.hRAPIService.registerUser({ firstName: this.firstName, lastName: this.lastName, email: this.email, password: this.password, confirmedPassword: this.confirmedPassword })
      .subscribe({
        next: (response) => {
          localStorage.setItem('hr_app_token', response['value']);
          this.router.navigateByUrl('/');
        },
        error: (error) => {
          console.log(error)
          this.errorMessage = error.error["errors"] ? Object.values(error.error["errors"])[0] as string : error.error;
        }
      });
    }
    else {
      this.errorMessage = "All fields are required!";
    }
  }
}

Também precisamos atualizar register-page.component.html para vincular as entradas.

<div class="column-layout background"></div>
<div class="column-layout group">
    <h2 class="h2">
            Register
    </h2>
    <p class="error-message">{{errorMessage}}</p>
    <igx-input-group type="border" class="input">
            <input type="text" required igxInput [(ngModel)]="firstName"/>
            <label igxLabel>FirstName</label>
    </igx-input-group>
    <igx-input-group type="border" class="input_1">
            <input type="text" required igxInput [(ngModel)]="lastName"/>
            <label igxLabel>Lastname</label>
    </igx-input-group>
    <igx-input-group type="border" class="input_1">
            <input type="email" required igxInput [(ngModel)]="email"/>
            <label igxLabel>Email</label>
    </igx-input-group>
    <igx-input-group type="border" class="input_1">
            <input type="password" required igxInput [(ngModel)]="password"/>
            <label igxLabel>Password</label>
    </igx-input-group>
    <igx-input-group type="border" class="input_1">
            <input type="password" required igxInput [(ngModel)]="confirmedPassword"/>
            <label igxLabel>Confirm password</label>
    </igx-input-group>
      <button (click)="onSubmit($event)" igxButton="raised" igxRipple class="button">
        Register
      </button>
</div>

Para estilizar a errorMessage precisamos adicionar os estilos no register-page.component.scss.

.error-message {
  text-align: center;
  margin: 2rem 0;
  font-weight: bold;
  color: red;
}

Como a página de registro, precisamos criar propriedades para vincular as entradas e uma função que é executada quando o formulário é enviado para a página de login. Esta função chamará o serviço de login para autenticar o usuário enviando seu email e senha. Se a autenticação for bem-sucedida, ela armazenará o token jwt no localStorage e navegará para a página inicial. Se falhar, exibirá uma mensagem de erro ao usuário. Também precisamos atualizar o login-page.component.html para vincular as entradas.

login.page.component.ts

export class LoginComponent {
  email: number;
  firstName: string;
  lastName: string;
  password: string;
  confirmedPassword: string;
  errorMessage: string;
 
  constructor(
    private hRAPIService: HRAPIService,
    private router: Router
  ) { }
  onSubmit(event) {
    event.preventDefault();
    if (this.email && this.password) {
      this.hRAPIService.loginUser({ email: this.email, password: this.password })
        .subscribe({
          next: (response) => {
            localStorage.setItem('hr_app_token', response['value']);
            this.router.navigateByUrl('/');
          },
          error: (error) => {
            console.log(error)
            this.errorMessage = error.error["errors"] ? Object.values(error.error["errors"])[0] as string : error.error;
          }
        });
    }
    else {
      this.errorMessage = "All fields are required!";
    }
  }
}

login-page.component.html

<div class="column-layout background"></div>
<div class="column-layout group">
    <h2 class="h2">
            Login
    </h2>
    <p class="error-message">{{errorMessage}}</p>
    <igx-input-group type="border" class="input">
            <input type="text" igxInput [(ngModel)]="email"/>
            <label igxLabel>Email</label>
    </igx-input-group>
    <igx-input-group type="border" class="input_1">
            <input type="password" igxInput [(ngModel)]="password"/>
            <label igxLabel>Password</label>
    </igx-input-group>
      <button (click)="onSubmit($event)" igxButton="raised" igxRipple class="button">
        Login
      </button>
</div>

Precisamos criar um AuthService que nos ajudará a decodificar o token, verificar se o usuário tem uma determinada função e remover a sessão. Para isso, criaremos um novo arquivo chamado auth.service.ts, que devemos importar no app.module.ts. Para decodificar os tokens, precisamos instalar o pacote jwt-decode.

import { Injectable } from "@angular/core";
import jwt_decode from 'jwt-decode
';
type Token = {
    Id?: string,
    email?: string,
    firstName?: string,
    exp?: number,
    role?: string,
    sub?: string,
}
@Injectable({
    providedIn: 'root'
  })
  export class AuthService {
    decodeToken(token) {
        return jwt_decode(token);
    }
    getEmail() {
        const token = localStorage.getItem('hr_app_token');
        const {email}: Token = this.decodeToken(token);
        return email;
    }
    isAuthenticated() {
        const token = localStorage.getItem('hr_app_token');
        if (token) {
            const {email, role}: Token = this.decodeToken(token);
            return email != null && role != null;
        }
        return false;
    }
    isAdmin() {
        const token = localStorage.getItem('hr_app_token');
        const {role}: Token = this.decodeToken(token);
        return this.isAuthenticated() && role === "Administrator";
    }
    logout() {
        localStorage.removeItem('hr_app_token');
    }
}

Implementando Guardas para Endpoints para Melhor Segurança

Para aprimorar a segurança, precisamos implementar guardas para nossos endpoints. Criaremos três guardas, começando com a anonymous-guard.ts. Esta guarda garante que as páginas de login e registro sejam acessíveis apenas para usuários que não estão conectados. Se um usuário já conectado tentar acessar essas páginas, ele deve ser redirecionado para a página inicial.

Para implementar esta guarda, criaremos uma pasta de guardas dentro do diretório do aplicativo e criar um novo arquivo chamado anonymous-guard.ts.

import { Injectable } from '@angular/core';
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, Router, UrlTree } from '@angular/router';
import { Observable } from 'rxjs';
import { AuthService } from '../services/auth.service';
 
@Injectable({
    providedIn: 'root'
})
export class AnonymousGuard implements CanActivate {
    constructor(private router: Router,
        private authService: AuthService) { }
    canActivate(
        next: ActivatedRouteSnapshot,
        state: RouterStateSnapshot): Observable
<boolean | UrlTree>
| Promise
<boolean | UrlTree>
| boolean | UrlTree {
        if (!this.authService.isAuthenticated()) {
            return true;
        }
        return this.router.parseUrl("/");
    }
}

A próxima guarda que precisamos implementar é chamada auth-guard. Esta guarda garantirá que certas páginas sejam acessíveis apenas para usuários autenticados.

import { Injectable } from '@angular/core';
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, Router, UrlTree } from '@angular/router';
import { Observable } from 'rxjs';
import { AuthService } from '../services/auth.service';
@Injectable({
    providedIn: 'root'
})
export class AuthGuard implements CanActivate {
    constructor(private router: Router,
        private authService: AuthService) { }
    canActivate(
        next: ActivatedRouteSnapshot,
        state: RouterStateSnapshot): Observable
<boolean | UrlTree>
| Promise
<boolean | UrlTree>
| boolean | UrlTree {
        if (this.authService.isAuthenticated()) {
            return true;
        }
        return this.router.parseUrl("/login-page");
    }
}

A terceira guarda chamada admin-guard restringirá o acesso a certas páginas apenas para usuários com a função de Administrador.

import { Injectable } from '@angular/core';
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, Router, UrlTree } from '@angular/router';
import { Observable } from 'rxjs';
import { AuthService } from '../services/auth.service';
 
@Injectable({
    providedIn: 'root'
  })
export class AdminGuard implements CanActivate {
    constructor(private router: Router,
        private authService: AuthService) { }
 
    canActivate(
        next: ActivatedRouteSnapshot,
        state: RouterStateSnapshot): Observable
<boolean | UrlTree>
| Promise
<boolean | UrlTree>
| boolean | UrlTree {
        if (this.authService.isAdmin()) {
            return true;
        }
        return this.router.parseUrl("/login-page");
    }
}

Após criarmos nossas guardas, precisamos aplicá-las às rotas apropriadas. Para fazer isso, abra app-routing.module.ts e adicione uma propriedade canActivate para cada rota junto com a guarda correspondente.

Por exemplo, as páginas de login e registro devem ser acessíveis apenas para usuários que não estão conectados, então adicionamos AnonymousGuard às suas rotas. A página mestre deve ser acessível apenas para usuários autenticados, então adicionamos AuthGuard a essa rota. Finalmente, as páginas de adicionar evento e adicionar função devem ser acessíveis apenas para usuários com a função de Administrador, então anexamos AdminGuard a essas rotas.

export const routes: Routes = [
  { path: '', redirectTo: 'master-page', pathMatch: 'full' },
  { path: 'error', component: UncaughtErrorComponent },
  { path: 'master-page', loadChildren: () => import('./master-page/master-page.module').then(m => m.MasterPageModule), canActivate: [AuthGuard]},
  { path: 'register-page', component: RegisterPageComponent, data: { text: 'Register Page' }, canActivate: [AnonymousGuard]},
  { path: 'login-page', component: LoginPageComponent, data: { text: 'Login' }, canActivate: [AnonymousGuard]},
  { path: 'add-event', component: AddEventComponent, data: { text: 'Add Event' }, canActivate: [AdminGuard]},
  { path: 'add-role-to-user', component: AddRoleToUserComponent, data: { text: 'Add Role' }, canActivate: [AdminGuard]},
  { path: '**', component: PageNotFoundComponent } // must always be last
];

Para garantir que usuários sem permissões não possam acessar certos links na navegação, devemos ocultá-los. Para fazer isso, podemos adicionar a diretiva *ngIf=“isUserAdmin()” aos elementos igx-list-item que correspondem às opções ADD EVENT e ADD ROLE TO USER no arquivo master-page.component.html. Ao fazer isso, garantimos que esses links sejam visíveis apenas para usuários com privilégios de administrador.

Para implementar esta funcionalidade, também precisaremos atualizar o arquivo master-page.component.ts. Podemos criar uma função para verificar se o usuário atual é um administrador e usá-la na diretiva *ngIf que adicionamos anteriormente.

Além disso, precisamos criar uma função de logout e anexá-la ao evento de clique do igx-list-item que corresponde ao link LOGOUT. Isso permitirá que os usuários se desconectem do sistema quando necessário.

Deveria se parecer com isso:

…
<igx-list-item [isHeader]="false" routerLink="/master-page/add-role-to-user" *ngIf="isUserAdmin()">
<span igxListThumbnail>
    <igx-avatar icon="people" [roundShape]="true" class="avatar_1"></igx-avatar>
</span>
<span igxListLine>
    <p class="ig-typography__subtitle-2 text_3">
              ADD ROLE TO USER
    </p>
</span>
</igx-list-item>
<igx-list-item [isHeader]="false" routerLink="/master-page/add-event" *ngIf="isUserAdmin()">
<span igxListThumbnail>
    <igx-avatar icon="stars" [roundShape]="true" class="avatar_1"></igx-avatar>
</span>
<span igxListLine>
    <p class="ig-typography__subtitle-2 text_3">
              ADD EVENT
    </p>
</span>
</igx-list-item>
<igx-list-item [isHeader]="false" (click)="logout()">
<span igxListThumbnail>
    <igx-avatar icon="exit_to_app" [roundShape]="true" class="avatar_1"></igx-avatar>
</span>
<span igxListLine>
    <p class="ig-typography__subtitle-2 text_3">
              LOGOUT
    </p>
</span>
</igx-list-item>
…

export class MasterPageComponent {
  public listItemVisible = false;
 
  constructor(private authService: AuthService,
    private router: Router){}
  isUserAdmin() {
    return this.authService.isAdmin();
  }
  logout() {
    this.authService.logout();
    this.router.navigateByUrl('/login-page');
  }
}

Nosso próximo passo é estabelecer uma conexão entre a página de adicionar evento e a API. Para conseguir isso, precisamos criar uma nova função dentro do serviço HRDashboard que tratará da solicitação HTTP POST para criar um novo evento.

public postEvent(data: any, contentType: string = 'application/json-patch+json, application/json, text/json, application/*+json'): Observable<any>{
    const options = {
      headers: {
        'content-type': contentType,
        Authorization: `Bearer ${localStorage.getItem('hr_app_token')}`,
      },
    };
    const body = data;
    return this.http.post(`${API_ENDPOINT}/Event`, body, options);
  }

Além disso, no arquivo add-event.component.ts, precisamos definir propriedades que vincularão os campos de entrada ao componente e adicionar a função onSubmit. Como os emails serão recebidos em um único campo separado por vírgulas, precisaremos dividi-los antes de enviá-los para a API.

export class AddEventComponent {
  emails: string;
  category: string;
  title: string;
  date: string;
  errorMessage: string;
 
  constructor(private hrApiService: HRDashboardService,
    private router: Router) {}
  onSubmit(event) {
    event.preventDefault();
    const splitEmails = this.emails.split(', ');
    if (this.emails && this.category && this.title && this.date) {
      this.hrApiService.postEvent({ category: this.category, title: this.title, date: this.date, userEmails: splitEmails})
        .subscribe({
          next: (response) => {
              this.router.navigateByUrl('/');
          },
          error: (error) => {
            console.log(error)
            this.errorMessage = error.error["errors"] ? Object.values(error.error["errors"])[0] as string : error.error;
          }
        });
    }
    else {
      this.errorMessage = "All fields are required!";
    }
  }
}

Atualizando o Painel

Após a conclusão das etapas acima, podemos prosseguir para atualizar o painel. Anteriormente, devemos modificar o HRDashboardService para substituir todas as ocorrências de ‘Bearer ’ com Bearer ${localStorage.getItem(‘hr_app_token’)} em solicitações que têm um cabeçalho de autorização. Isso garante que buscamos dados usando o token JWT correto.

Além disso, precisamos adicionar uma nova função ao HRDashboardService que busca apenas os eventos relacionados ao usuário atual.

public getMyEvents(): Observable<any>{
    const options = {
      headers: {
        Authorization: `Bearer ${localStorage.getItem('hr_app_token')}`,
      },
    };
    return this.http.get(`${API_ENDPOINT}/Event`, options);
  }

Exibindo Eventos do Usuário na Página do Painel

Em seguida, exibiremos os eventos do usuário na página do painel usando componentes de cartão. Para conseguir isso, precisaremos abrir o arquivo dashboard.component.html e usar a diretiva *ngFor para renderizar componentes igx-card baseados na propriedade myEvents, que conterá os eventos do usuário atual. Além disso, podemos usar *ngIf=“isUserAdmin()” para garantir que a grade seja visível apenas para administradores. Além disso, devemos atualizar a saudação no painel para exibir o email do usuário atual, como “Good Morning, {{email}}!”.

O arquivo resultante deve ficar assim:

<div class="row-layout group">
    <div class="column-layout group_1">
        <div class="column-layout group_2">
            <div class="row-layout group_3">
                <div class="column-layout group_4">
                    <h5 class="h5">
                          Good Morning, {{email}}!
                    </h5>
                    <p class="text">
                           Your Highlights
                    </p>
                </div>
            </div>
            <div class="row-layout group_5">
                <igx-card *ngFor="let event of myEvents; index as i;"type="outlined" class="card">
                    <igx-card-media height="200px">
                                    <img src="/assets/Illustration1.svg" class="image" />
                    </igx-card-media>
                    <igx-card-header>
                        <h3 igxCardHeaderTitle>
                                 {{event.title}}
                        </h3>
                        <h5 igxCardHeaderSubtitle>
                                 {{event.category}}
                        </h5>
                        <h5 igxCardHeaderSubtitle>
                                 {{event.date}}
                        </h5>
                    </igx-card-header>
                </igx-card>
            </div>
        </div>
        <div class="row-layout group_6" *ngIf="isUserAdmin()">
            <div class="column-layout group_7">
                <h6 class="h6">
                      All Events
                </h6>
                        <igx-grid [data]="hRDashboardEventAll" primaryKey="id" displayDensity="cosy" [rowEditable]="true" [allowFiltering]="true" filterMode="excelStyleFilter" (rowEditDone)="eventRowEditDone($event)" (rowDeleted)="eventRowDeleted($event)" class="grid">
                          <igx-column field="id" dataType="string" header="id" [sortable]="true" [selectable]="false"></igx-column>
                          <igx-column field="title" dataType="string" header="title" [sortable]="true" [selectable]="false"></igx-column>
                          <igx-column field="category" dataType="string" header="category" [sortable]="true" [selectable]="false"></igx-column>
                          <igx-column field="date" dataType="date" header="date" [sortable]="true" [selectable]="false"></igx-column>
                <igx-action-strip>
                    <igx-grid-pinning-actions></igx-grid-pinning-actions>
                    <igx-grid-editing-actions [addRow]="true"></igx-grid-editing-actions>
                </igx-action-strip>
                        </igx-grid>
            </div>
        </div>
    </div>
</div>

No arquivo dashboard.component.ts, precisaremos definir duas propriedades: myEvents e email. Essas propriedades devem ser preenchidas com os dados relevantes na função ngOnInit.

export class DashboardComponent implements OnInit {
  public hRDashboardEventAll: any = null;
  myEvents: any;
  email: any;
  constructor(
    private hRDashboardService: HRDashboardService,
    private authService: AuthService,
  ) {}
  ngOnInit() {
    this.hRDashboardService.getEventAll().subscribe(data => this.hRDashboardEventAll = data);
    this.hRDashboardService.getMyEvents().subscribe(data => this.myEvents = data);
    this.email = this.authService.getEmail();
  }
  public isUserAdmin() {
    return this.authService.isAdmin();
  }
…

Agora podemos ver no painel todos os eventos do usuário atual e da grade, se o usuário for Administrador, ele pode atualizar e excluir as entradas de lá.

Conectando a Página de Adicionar Função ao Usuário e a API

O passo final é estabelecer uma conexão entre a página de adicionar função ao usuário e a API. Para conseguir isso, precisaremos criar uma função dentro do serviço HRDashboard que busca dados do usuário da API e preenche o componente de seleção de emails.

public getUsers(): Observable
<any>
{
    const options = {
      headers: {
        Authorization: `Bearer ${localStorage.getItem('hr_app_token')}`,
      },
    };
    return this.http.get(`${API_ENDPOINT}/User`, options);
  }
 
  public changeUserRole(data: any): Observable
<any>
{
    const options = {
      headers: {
        Authorization: `Bearer ${localStorage.getItem('hr_app_token')}`,
      },
    };
    const body = data;
    return this.http.post(`${API_ENDPOINT}/User/Role`, body, options);
  }

Após finalizarmos isso, podemos ir para add-role-to-user.component.ts e buscá-los. Também devemos criar uma função onSubmit que será chamada changeUserRole do serviço HRDashboard. O resultado final deve ficar assim:

export class AddRoleToUserComponent {
  users: any;
  email: string;
  role: string;
  constructor(private hrApiService: HRDashboardService,
    private router: Router) { }
  ngOnInit() {
    this.hrApiService.getUsers()
      .subscribe(data => {
        this.users = data;
      });
  }
 
  onSubmit(event) {
    event.preventDefault();
    if (this.email && this.role) {
      this.hrApiService.changeUserRole({ email: this.email, role: this.role})
        .subscribe({
          next: (response) => {
              this.router.navigateByUrl('/');
          },
          error: (error) => {
            console.log(error)
          }
        });
    }
  }
}

<div class="row-layout group">
    <div class="column-layout group_1">
        <h2 class="h2">
                  Add Role to user
        </h2>
        <div class="row-layout group_2">
                  <igx-select type="border" class="select"[(ngModel)]="email">
            <igx-select-item *ngFor="let user of users; index as i;" value="{{user.email}}">
                          {{user.email}}
            </igx-select-item>
                    <label igxLabel>Email</label>
                  </igx-select>
                  <igx-select type="border" class="select"[(ngModel)]="role">
            <igx-select-item value="Administrator">
                          Administrator
            </igx-select-item>
                    <label igxLabel>Role</label>
                  </igx-select>
        </div>
            <button igxButton="raised" (click)="onSubmit($event)" igxRipple class="button">
              Submit
            </button>
    </div>
</div>

Após seguir as etapas necessárias e concluir as tarefas necessárias, agora temos um aplicativo totalmente funcional que foi construído com App Builder e integrado a uma API. Isso significa que nosso aplicativo agora é capaz de se comunicar com a API, permitindo que os usuários executem várias ações, como criar novos eventos, adicionar funções aos usuários e visualizar seu painel personalizado. Você pode visualizar o código completo da demonstração no GitHub.

Web Development