We Keep Coding

Render HTML string template that refers internal angular components

I'm trying to render an HTML string template that refers internal angular components & directives which are part of the app.
The question is that bind is lost in components and I don't know how to "preload" directives just like we do with components through entryComponents.
I created a demo project to better explain/demonstrate what I'm trying to achieve with dynamic templates:
There are 3 samples in my demo project:
Sample #1 - Common usage scenario - components are referenced inside my main component and work as expected
Sample #2 - [innerHTML] which obviously doesn't meet the requirements.
Sample #3 - Dynamic render which doesn't work for components since bind is broken and directives are not processed.
https://stackblitz.com/edit/angular-dynamic-html-1pcrbx?file=app/app.component.html
#Component({
})
class MyComponent {
constructor() {}
private myTemplate = `
<hello name="TEST"></hello>
<div test>My div referencing a custom directive</div>
`;
}
So, is it possible to do what I'm tying to do?
What am I doing wrong?

How to use the instance of class in another file?

I am using babylonjs in my React app. Since this file get bigger and bigger I try to split it into several parts.
Scene3d.js
import * as Setup from './Scene3d/setup'
class Scene3d extends Component {
...
}
export default Scene3d
setup.js
import Scene3d from '../Scene3d'
Unfortuantely I am not able to use the instance object of Scene3d. Scene3d just returns the component in setup.js. I want to avoid to add "this" to all function to pass the object to the functions.
I appreaciate your help.
Best

Invoke a method of ng2-pdf-viewer from angular component

I am new to angular 5. I am working on ng2-pdf-viewer. I need to invoke one of its method updateSize() in that plugin from my component. Can anyone tell me how can I access it from a component.
Here is the link of the plugin
https://www.npmjs.com/package/ng2-pdf-viewer

You can use a template reference variable to access the public methods of ng2-pdf-viewer
Add a template variable named #pdfViewer in the html file like so
<pdf-viewer
#pdfViewer
[src]="reportObject.src"
[page]="reportObject.currentPage"
[render-text]="true"
>
</pdf-viewer>
Use ViewChild decorator to reference it inside your component.
import { PdfViewerComponent } from 'ng2-pdf-viewer';
import {ViewChild} from '#angular/core';
#ViewChild('pdfViewer') pdfComponent: PdfViewerComponent;
You can now access the methods of ng2-pdf-viewer using the pdfComponent variable like so
this.pdfComponent.updateSize();

You can probably achieve this by using ViewChild.
In you html template where you use pdf-viewer, write it as something like this <pdf-viewer [src]="src"[original-size]="false" #pdfViewer></pdf-viewer>.
Add #ViewChild('pdfViewer') pdfViewer into your component.
After that, you should be able to use the method like this this.pdfViewer.updateSize() and also methods inside the pdfViewer.

How to call Loopback4 controller's method from another controller

I have a loopback 4 controller with a function that I don't want to expose via HTTP. I would like to be able to call the function from another controller.
How can I do this? Is there any way of injecting a controller in another controller?
(I 'm able to inject repositories in controllers, but not controllers in other controllers).

You have to first import repository of another controller e.g.
import { MemberRepository, EmailTemplateRepository } from '../repositories';
then you have to inject it in constructor like this:-
#repository(EmailTemplateRepository) public emailTemplateRepository: EmailTemplateRepository,
then after you can use any function of controller like this:-
const template = await this.emailTemplateRepository.findOne({
where: {
slug: 'user-password-reset',
status: 1
}
});

Answer is here: https://github.com/strongloop/loopback-next/issues/3028
#inject(‘controllers.AnotherController’) c: AnotherController

Ok I figured out how to make this work. You have to import the #repository component where the rest of the other import statements are, like so:
import { repository } from '#loopback/repository';
Adding this, will allow for, #repository(EmailTemplateRepository) public emailTemplateRepository: EmailTemplateRepository, to work.

How to design a global class for storing settings in Angular?

I have added a class like this.
export class Settings{
public data: string = "blopp";
}
When I try to access the data, it seems that the field I'm trying to assign that value to sees the class Settings itself but it doesn't recognize the data thingy.
How do I redesign the class to provide settings for other components?
I've read about #Output decorator but since I won't be binding to the values, it seems not the correct approach. I've made sure that the class is imported and recognized withing the component that's supposed to consume it. I've also tried the corresponding exposure but using a function in the class with settings - the same, failed result.

If you're using angular-cli and going to store in this class environment specific settings - you already have built in support for this.
Put the setting into environment.ts. For example:
export const environment = {
production: false,
someSetting: 'foo',
};
Then it can be consumed from anywhere within the app:
import { environment } from "../environments/environment"; //fix according to your project structure
#Injectable()
export class SampleService {
private foo = environment.someSetting;
}
Here you can find more info on how to add more environments and build you project with specific environment settings.

Your best bet for storing global settings is to use a service. The code for that looks like this:
import { Injectable } from '#angular/core';
#Injectable()
export class DataService {
serviceData: string;
}
I have a blog post about this here: https://blogs.msmvps.com/deborahk/build-a-simple-angular-service-to-share-data/
And a plunker here: https://plnkr.co/edit/KT4JLmpcwGBM2xdZQeI9?p=preview
Also, the #Output decorator is only for communication between a child component and a parent component where the child is nested within the parent.