samlinux

ng add @angular/material

samlinux

npm install --save-dev @dfinity/agent @dfinity/candid @dfinity/principal process

samlinux

ng g s ic

samlinux

// Angular imports
import { Injectable } from '@angular/core';
import { environment } from './../environments/environment';

// IC Imports
const Actor = require("@dfinity/agent").Actor;
const HttpAgent = require("@dfinity/agent").HttpAgent;

// candid declarations from the backend canister
const idlFactory = require('../../../backend/src/declarations/backend/backend.did.js').idlFactory;

samlinux

import { Component } from '@angular/core';
import { IcService } from './ic.service' ;

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

samlinux

<div style="margin:25px">
  <mat-tab-group animationDuration="0ms">
    <mat-tab label="First"> 
        <h1>{{ title }}</h1> 
        <p>{{ ic_response }}</p>
  
        <input type="text" id="name" name="name" #name>
        <button (click)="getGreet(name.value)">call greet</button>
  
    </mat-tab>

samlinux

import {MatTabsModule} from '@angular/material/tabs';
import {MatButtonModule} from '@angular/material/button';

samlinux

MatTabsModule,
MatButtonModule

samlinux

dfx canister id backend
> rrkah-fqaaa-aaaaa-aaaaq-cai

export const environment = {
  production: false,
  canisterId: 'rrkah-fqaaa-aaaaa-aaaaq-cai',
  host: 'http://localhost:8000'
};

samlinux

"types": ["node"]