Utilize the power of Wikitude within an Angular 2 application

I am currently working on integrating Wikitude Architect View in Angular 2 by referring to the code at this link. My goal is to implement this code in an Angular 2 compatible way.

import * as app from 'application';
import * as platform from 'platform';
import { Demo } from "./main-view-model";
import { View } from "ui/core/view";
import * as frameModule from 'ui/frame'

function pageLoaded(args) {
  var page = <View>args.object;
  page.bindingContext = new Demo();
  var architectView = page.getViewById<any>("architectView");
  console.log('pageLoaded');
}
<page xmlns="http://schemas.nativescript.org/tns.xsd" 
      xmlns:ar="nativescript-wikitudearchitectview" 
      loaded="pageLoaded">
      <GridLayout rows="*, auto">
        <ar:ArchitectView id="architectView" urlString="http://10.20.30.79:8888" urlLoaded='urlLoaded' urlLoadError='urlLoadError' urlInvoked='urlInvoked'/>
      </GridLayout>
</page>

Currently, I have implemented the following in Angular 2:

@Component({
  selector: "my-app",
  templateUrl: "app.xml"
})
export class AppComponent implements OnInit{
  
  ngOnInit() {
    var page = <View>args.object;
    page.bindingContext = new Demo();
    var architectView = page.getViewById<any>("architectView");
    console.log('pageLoaded');
  }
      <GridLayout rows="*, auto">
        <ar:ArchitectView id="architectView" urlString="http://10.20.30.79:8888" urlLoaded='urlLoaded' urlLoadError='urlLoadError' urlInvoked='urlInvoked'>
        </ar:ArchitectView>
        <Button row="1" text="hello"></Button>
      </GridLayout>

The key part is converting these 3 lines into Angular 2 syntax:

var page = <View>args.object;
page.bindingContext = new Demo();
var architectView = page.getViewById<any>("architectView");

However, I am unsure about how to achieve this in Angular 2.

Answer №1

To begin, make sure to modify the html file by changing <ar:ArchitectView to <ArchitectView. To facilitate this change, you can include the following code in your main.ts:

const architectView = require("nativescript-wikitudearchitectview");
registerElement("ArchitectView", () => architectView.ArchitectView);

Next, refer to the page at: and look for '#email'. Then add the following to your view:

<ArchitectView #architectView

In your component, include the following:

@ViewChild("architectView") architectView: ElementRef;

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Enhance User Experience - Automatically highlight the first element in Prime NG Menu when activated

I have been working on transitioning the focus from the PrimeNG menu to the first element in the list when the menu is toggled. Here is what I've come up with: In my template, I added: <p-menu appendTo="body" #menu [popup]="true&quo ...

Navigating the use of property annotations in Mapped Types with remapped keys

After exploring the concept of Key Remapping in TypeScript, as shown in this guide, I am wondering if there is a way to automatically inherit property annotations from the original Type? type Prefix<Type, str extends string> = { [Property in keyo ...

The IISNode website displays directory contents instead of launching the server.js file

Having trouble configuring IISNode to automatically serve the main server.js application file for my node application. Currently, when I navigate to http://localhost:80/ where my app is hosted, it just displays the folder contents instead of running the se ...

Error message: The 'Access-Control-Allow-Origin' policy is preventing access in a react express docker application

I have successfully set up a front-end React application and a Node/Express API using Docker. The React app is currently running on localhost:3000, while the API is running on localhost:9000. Both applications are fully functional. However, I am encounteri ...

What is the best way to show "no results found" message in a jQuery search list?

Everything is working smoothly. Does anyone have any suggestions on how to display a message saying "No results found"? This is the code I'm using: http://jsfiddle.net/UI_Designer/8p426fog/4/ $(".my-textbox").keyup(function() { var val = $( ...

Obtain array buffer from NodeJS to capture frames from a video file

My current goal is to extract frames from a video in node without relying on a video tag. I am utilizing openvg-canvas for this task, which allows me to print images and use the canvas API functionalities successfully. The challenge lies in the fact that ...

Object data is not being received by the defaultValue in React Hook Form

I am currently utilizing React Hook Form to facilitate the process of editing/updating data. I retrieve my data from zustand with a value type of any, and then proceed to save it as the defaultValue in React Hook Form. However, when attempting to acquire v ...

Incorporating transitions within a styled component using @emotion/core

I'm currently working on adding a smooth transition effect when a button is clicked. The code that adjusts the isOpen property is functioning correctly. However, I'm facing an issue where instead of animating, the content just flips abruptly. I a ...

The AngularJS upload function is returning false when checking Request.Content.IsMimeMultipartContent

I am facing an issue while trying to upload files along with form data from my Angularjs client to a web api. I came across some reference code online and followed the same approach. However, when I execute the first line of code in the Web API method, if ...

Editable content area: Maintain and restore cursor position when placed on a blank line

While working with a contenteditable div and constantly updating the HTML as the user types, I am facing the challenge of saving and restoring the caret position. I came across a helpful solution provided by Tim Down on a similar issue, which I found on S ...

Dealing with Regular Expressions in Javascript and PHP Challenge

I am struggling to achieve the same outcome with my JavaScript as I do with my PHP code. The issue lies in how JavaScript omits backslashes, unlike PHP. To address this, I have included random forward and backward slashes to cater for different systems. Se ...

Unable to retrieve information from service using Angular 1.6 and TypeScript

I'm having an issue retrieving data from a Service in my Controller. Here is the code for my Service file: import {IHttpService} from 'Angular'; export class MyService { public static $inject = ['$http']; constructor(private $htt ...

Discover the steps to initiate Firefox in Incognito Mode using NodeJS and Selenium!

Can anyone help me figure out how to launch Firefox in private mode using TypeScript? I have attempted the following code but it doesn't seem to work: static async LaunchFirefoxInPrivateMode():Promise<WebDriver> { //Setting up firefox capab ...

Ensuring the inclusion of library licenses in the production build is a crucial step

We have numerous dependencies (node_modules) in our Angular app, which are typically licensed under Apache 2.0 or MIT. From my understanding of the licenses, the production build is considered a "derived work" and we are required to include copyright notic ...

What is the process of assigning attribute values conditionally in Angular 2?

I'm currently exploring Angular 2 and facing a challenge with a basic material input tag. I want to dynamically set its value based on a condition. <md-input value="dataSelected ? {{selectedDataName}} : ''"></md-input> I attemp ...

Utilizing Office.js: Incorporating Angular CLI to Call a Function in a Generated Function-File

After using angular-cli to create a new project, I integrated ng-office-ui-fabric and its dependencies. I included in index.html, added polyfills to angular.json, and everything seemed to be working smoothly. When testing the add-in in Word, the taskpane ...

Is it time to end my MediaObserver subscription in flex-layout for Angular?

Within my Angular component, I have implemented the following code to display different elements based on screen resolution: constructor(private mediaObserver: MediaObserver) {} private mySubscription: Subscription; public ngOnInit(): void { this.my ...

The SVG format quickly displays new and larger datasets on line charts without any transition effects

My goal is to create a line chart with animated transitions similar to this demo, but without the dots. I am attempting to integrate this functionality into a react component where the update method can be triggered by another component, allowing the d3 op ...

ES6 Angular-Meteor ng-table's getData function is not being invoked

I've been working on updating my code to ES6. Specifically, I'm using angular-meteor and ng-table. Everything was displaying correctly in the table before the refactor, but now after converting to ES6 syntax, the data no longer appears. Here is a ...

Tips and tricks for activating javax.script in Websphere liberty profile on Bluemix

I am looking to incorporate JavaScript into one of my Java applications. In order to test this, I executed the following code: javax.script.ScriptEngineManager manager = new ScriptEngineManager(); javax.script.ScriptEngine engine = manager.getEngineByName ...