I want to attached an Angular2 Component to a newly added DOM - javascript

I want to bind an Angular2 Component to a newly added dom.
What happen is: <my-app> tag is not updated with <h1>My First Angular App</h1>. With the code below, having a small DOM, my-app tag contains <h1>My First Angular App</h1>, but with huge DOM, it didn't, I only see my-app tag.
Here is my code:
Component.TS
import { Component } from "#angular/core";
#Component({
selector: "my-app",
template: "<h1>My First Angular App</h1>"
})
export class AppComponent { }
Main.TS
import { platformBrowserDynamic } from "#angular/platform-browser-dynamic";
//APPModule not included on this post, same as the quickstart
import { AppModule } from "./app.module";
interface MyWindow extends Window {
displayApp(): void;
}
declare var window: MyWindow;
window.displayApp = function displayApp() {
const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);
}
Some Javascript Code
//adding the selection component dom.
document.getElementById('main-content').appendChild(document.createElement('my-app'));
//do ajax call then on success
window.displayApp();
Having a full angular approach is not an option here because there are existing ui component based on other technology, and we are exploring angular on other components.

Related

Angular 5 - Loading Script After View Is Loaded

I have a legacy script that I need to include in my angular application.
The thing about this script is that it relates to a specific component, and it has to be loaded only after the view of the component is loaded.
As for today, I succeeded to include it on OnInit function but sometimes (not always for some reason) the CLI throws an error about it.
import { Component, OnInit } from '#angular/core';
#Component({
selector: 'app-player-page',
templateUrl: './player-page.component.html',
styleUrls: ['./player-page.component.scss']
})
export class PlayerPageComponent implements OnInit {
public itemId: string;
constructor() {}
ngOnInit() {
//We loading the player srcript on after view is loaded
require('assets/scripts/player/player.js');
}
}
The script assumes that elements in the UI exists and it searches them by the id.
When adding it on top of the page, it doesn't work.
What is the best way to achieve the desired behavior?
There are multiple solutions to this issue.
declare the require const on top of your component
declare const require: any;
import { Component, OnInit } from '#angular/core';
#Component({})
...
use the dynamic import() function from typescript
ngAfterViewInit() {
//We loading the player script on after view is loaded
import('assets/scripts/player/player.js');
}
change the library to only start running after you call a function from the component, this way you can add it to the scripts array of your angular.json

Nativescript Render Component after the page has loaded

I am trying to add WikitudeArchitectView to my typescript code, I registered the element to the main.ts typescript file:
var architectView = require("nativescript-wikitudearchitectview");
registerElement("ArchitectView", () => architectView.ArchitectView);
in the XML file i have added the ArchitectView element tag:
<StackLayout>
<ArchitectView urlString="http://10.20.30.79:8888" urlLoaded='urlLoaded' urlLoadError='urlLoadError' urlInvoked='urlInvoked'>
</ArchitectView>
</StackLayout>
when i run the code on my Device i get the error
So I think i need to find a way to render the after the page has loaded (maybe using ngOnInit) i dont know how to do this
Hey you can achieve to render after the page has loaded by using ngAfterViewInit.I am also writing the code for ngOnInit.
Here is the bit of code to help you.
import { Component, ElementRef,AfterViewInit, OnInit, ViewChild } from "#angular/core";
export class DuesComponent implements OnInit AfterViewInit { }
ngAfterViewInit() {
<Write your logic inside this funtion>
}
ngOnInit() {
}

The selector "relative-path" did not match any elements

I am following the component-relative paths angular documentation.
Per the instructions, I am keeping my component ts and component html in the same directory. For the purpose of this question, that directory is /app/components/first
My component ts contains the following code, and is named First.component.ts
import {Component, Injectable} from '#angular/core';
import {MyService} from "../../service/MyService";
import {ValueObj} from "../../value/ValueObj";
#Component({
moduleId: module.id,
selector: 'relative-path',
templateUrl: 'First.component.html',
providers: [MyService]
})
#Injectable()
export class FirstComponent {
public valueObjs: ValueObj[];
constructor(private _myService: MyService) {}
getAllItems(): void {
this._myService.getAllValueObjs().subscribe(
data => this.valueObjs= data, error=> console.log(error),
() => console.log("getting complete"));
}
}
My First.component.html contains the following code:
<form (ngSubmit)="getAllItems()">
<label>Value Objects</label>
<button type="submit">Search</button>
</form>
<hr>
<p style="color:red">{{error}}</p>
<h1>All Objects</h1>
<div *ngFor="let valueObj of valueObjs">{{valueObj.name}}</div>
I have looked at this solution, The selector "my-app" did not match any elements , however, I do not find it applicable. My main.ts file only contains this:
import { platformBrowserDynamic } from '#angular/platform-browser-dynamic';
import { AppModule } from './app.module';
// start the application
const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);
and has no reference to BrowserModule. I also looked at why getting the error "The selector did not match any elements"? , however, I have no boot.ts file to compare my values.
Lastly, I have looked at Angular2 CLI build EXCEPTION : The selector "app-root" did not match any elements , however, I have no reference to angular-universal in my packaging.json.
Any idea as to what I am doing wrong?
I just had the same issue, the example is a bit confusing. The line:
selector: 'relative-path',
is just an example name of your component, it is not a command to use relative paths.
Simply adding the moduleId line will make relative paths work, so you can leave your selector as "first-component" or whatever you had before.
The error message is actually trying to say that the saying that the selector you have now ("relative-path") does not match what is in the index.html file. This only happens when you change the component that is in the bootstrap entry in app.module. If you had the same issue with a non-bootstrap module, you get a much clearer error message.

How to load script file from component html?

Basically I wanted to load component html specific script file, so that script I'm going to put script file reference inside component html itself, I'm seeing that inner script file has been ignored while rendering component html on page.
Component
import { Component } from '#angular/core';
#Component({
selector: 'my-app',
templateUrl: 'test.html'
})
export class AppComponent { }
test.html
<div>
<h1>My First Angular 2 App</h1>
</div>
<script src="test.js"></script>
Above is my code what I tried & I already have test.js there in place.
Plunkr Here
Is there any way to load component specific javascript file with component OR with its html?
Working Plunker
Security
It looks like Angular takes out script tags from Html templates.
From the Angular Docs:
It removes the <script> tag but keeps safe content, such as the text content of the <script> tag
Angular provides methods to bypass security, but for your use case it looks like a service would be helpful.
Services
The preferred way to include your own custom script in your component from a separate dedicated file would be to create a service.
I took the code from your Plunker's script.js file and put it into a service like this:
// File: app/test.service.ts
import { Injectable } from '#angular/core';
#Injectable()
export class TestService {
testFunction() {
console.log('Test');
}
}
Then I imported the service and called the custom code like this:
// File: app/app.component.ts
import { Component, OnInit } from '#angular/core';
import { TestService } from './test.service';
#Component({
selector: 'my-app',
templateUrl: 'test.html',
providers: [TestService]
})
export class AppComponent implements OnInit {
constructor(private testService: TestService) {}
ngOnInit() {
this.testService.testFunction();
}
}
Lifecycle hooks
If you want to call your service's custom code at a specific point you can take advantage of lifecycle hooks. For example you can call your code using the ngAfterViewInit() instead of ngOnInit() if you want to wait until the view has loaded.

Dynamic template in templatURL in angular2

I have been using ng-include in angular 1 whenever I had to include a tamplate dynamically in the page.
Now how to acheive this in angular 2. I have tried searching and found these :
https://groups.google.com/forum/#!topic/angular/ROkKDHboWoA ,
https://github.com/angular/angular/issues/2753
can someone explain how to do this in angular2 as the link says ng-include is not included due some security reasons.
Or atleast how to use a veriable in templateUrl property so that the veriable value can be handled on server side to serve the template...
And as you can see in this issue on the Angular repo, most probably we won't get that directive. There has been a long discussion whether we need this directive or not, and if not provided how we can implement it by our self.
I tried to make a simple example of how it can be implemented.
#Component({
selector: 'my-ng-include',
template: '<div #myNgIncludeContent></div>'
})
export class MyNgInclude implements OnInit {
#Input('src')
private templateUrl: string;
#ViewChild('myNgIncludeContent', { read: ViewContainerRef })
protected contentTarget: ViewContainerRef;
constructor(private componentResolver: ComponentResolver) {}
ngOnInit() {
var dynamicComponent = this.createContentComponent(this.templateUrl);
this.componentResolver.resolveComponent(dynamicComponent)
.then((factory: any) => this.contentTarget.createComponent(factory));
}
createContentComponent(templateUrl) {
#Component({
selector: 'my-ng-include-content',
templateUrl: templateUrl,
directives: FORM_DIRECTIVES,
})
class MyNgIncludeContent {}
return MyNgIncludeContent ;
}
}
For a demo check this Plunker.
Actually angular 2 has not featured this in the current build. Also as per the links added, I don't think this feature will be included.
A piece of javascript to dynamically add template using ajax call may be used.
Or possibly in future a dynamic template loader library will be available for use.
As of alpha.46 (and with ES6 JS):
In the parent file import file you wanted to include:
#Component({
selector: 'account'
})
#View({
templateUrl: './folder/containing/template.html'
})
Easy as that.
If you meant to import a component, this is what you do in the parent file:
import ComponentClassName from './folder/with/componentName';
...
#View({
directives: [ComponentClassName]
})
And inside the imported file of the child/component:
Define your ComponentClassName (you may add templateUrlto the #View just as demonstrated at the top).
Don't forget to export default ComponentClassName; at the bottom of the file.
There are not many examples in the official Angular 2 docs, but you stumble across it every once in a while.
As #binariedMe accurately describes, ng-include is off in Angular 2 due to security considerations. The recommended method is to use a custom directive with slightly more programmatical overhead.
Additionally, to prepare your Angular code for 2.0:
myApp.directive('myInclude', function() {
return {
templateUrl: 'mytemplate.html'
};
});
And rather than using ng-include on an element, simply add my-include:
<div my-include></div>
Following #binariedMe and this blog post http://blog.lacolaco.net/post/dynamic-component-creation-in-angular-2/, I was able to construct a solution that may work for you. Using an AJAX call and creating the custom component dynamically from the returned html content should fix this problem in creating a new my-ng-include custom directive.
import {
Component,
Directive,
ComponentFactory,
ComponentMetadata,
ComponentResolver,
Input,
ReflectiveInjector,
ViewContainerRef
} from '#angular/core';
import { Http } from '#angular/http';
export function createComponentFactory(resolver: ComponentResolver, metadata: ComponentMetadata): Promise<ComponentFactory<any>> {
const cmpClass = class DynamicComponent {};
const decoratedCmp = Component(metadata)(cmpClass);
return resolver.resolveComponent(decoratedCmp);
}
#Directive({
selector: 'my-ng-include'
})
export class MyNgInclude {
#Input() src: string;
constructor(private vcRef: ViewContainerRef, private resolver: ComponentResolver, private http: Http) {
}
ngOnChanges() {
if (!this.src) return;
this.http.get(this.src).toPromise().then((res) => {
const metadata = new ComponentMetadata({
selector: 'dynamic-html',
template: res.text(),
});
createComponentFactory(this.resolver, metadata)
.then(factory => {
const injector = ReflectiveInjector.fromResolvedProviders([], this.vcRef.parentInjector);
this.vcRef.createComponent(factory, 0, injector, []);
});
});
}
}
Just simply use it as follows:
<my-ng-include [src]="someChangingProperty"></my-ng-include>

Categories