Google Assistant Interactive Canvas using Angular
I have read in the AoG Documentation about creating interactive canvas in Angular. I tried to create a canvas action using Angular. I have imported the interactive canvas script tag in index.html but i am not sure how to use the interactive canvas in app.component.ts file. When i try to use the interactive canvas in app.component.ts file i am getting a ts error like
cannot find name interactive canvas
Index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Angular Canvas</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<script src="https://www.gstatic.com/assistant/interactivecanvas/api/interactive_canvas.min.js"></script>
<!-- SCENE CONTROLLER -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<app-root></app-root>
</body>
</html>
component.ts file
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-canvas',
templateUrl: './canvas.component.html',
styleUrls: ['./canvas.component.css']
})
export class CanvasComponent implements OnInit {
canvas;
constructor() {
this.canvas = interactiveCanvas;
}
ngOnInit(): void {
}
}
Do i need to install any plugins for it?. Does anyone has tried to create an interactive canvas with Angular
If we look at the documentation you can see one note
Note: The interactive canvas object is attached to the window object. If you are using a front-end framework to develop your web app, you need to ensure that you have access to a window to set up the API.
Steps did find out the interactive canvas
After adding the interactive canvas script tag just run the angular application and in-browser console just type window.interactiveCanvas which displays output
So based on the above approach i have made some few tweaks in the code as well as installed JQuery like below which makes the angular application works in Interactive canvas
import { Component, OnInit } from '@angular/core';
import * as $ from 'jquery';
@Component({
selector: 'app-canvas',
templateUrl: './canvas.component.html',
styleUrls: ['./canvas.component.css']
})
export class CanvasComponent implements OnInit {
interactiveCanvas;
callbacks: any = {};
constructor() {
this.interactiveCanvas = (window as any).interactiveCanvas;
this.callbacks.onUpdate = (data: any) => {
this.callbacks.html_data = data;
};
}
ngOnInit(): void {
this.initializeScenes();
}
initializeScenes = () => {
this.interactiveCanvas.getHeaderHeightPx().then((height: any) => {
$(document.body).css('margin-top', `${height}px`);
this.interactiveCanvas.ready(this.callbacks);
});
}
}
HTML:
<div class="container">
<div id="welcome">
<p>Angular canvas</p>
</div>
</div>
Now i got the initial output of the canvas like below
