In Vue, there's this feature where you can render a registered component directly to an HTML or Laravel Blade file using Vue.component()
instead of mounting them to a parent component/element first. I wonder if such way is also possible with React, because I'm currently building a Laravel-React side project. You might suggest just create a root JS file and render the component with ReactDOM.render(), but that would be a hassle and it would flood the folder if I want to render multiple small components.
In your view blade just add div like below
<div id="react-component-id" ></div>
and create component and render you html as below:
if (document.getElementById('react-component-id')) {
ReactDOM.render(
<yourCreatedCompoennt />,
document.getElementById('react-component-id')
);
}
So it will not affect root level.
Related
I have a component called </App>, and another component called </Interface>, both are already imported, how can I put Interface on top of App in the centre and export (export default function foo() ) it?
I am new to both React and HTML, so any helps are appreciated!
let me provide some guidance for you here:
1.) It is great that you are learning React, however since you are brand new to web development I strongly urge you to first learn to make a website with vanilla html, vanilla javascript, and css. It will provide you the fundamentals you need to jump into React.
2.) When you are asking about putting Interface on top of App, are you asking about how to make it so that Interface is displayed above App on the page that is rendered, or are you asking how to move it's position in the code? Also, I'm not sure why you have your app component as the source for the image. You should import images from your folder which contains your assets and use that instead.
You can simply import the interface component and use it in the app component. Please follow the provided example.
export default App= (props) => {
return
(
<Interface/>
)
}
Above mentioned would add Interface component to the App Component, similarly you can follow the same pattern to open any other component in the Interface component respectively.
I need to insert HTML5 code inside my component.ts, I'm trying to reflect that code in my component.html, how can I insert it including the CSS and the Angular's directives? I have to do it like that because the web site needs to change depending on the current hour.
I'm using angular 8. Thanks
I've used in the component.html the function [innerHtml]="htmlToAdd" inside a div label, and in the component.ts have created a var type any called "htmlToAdd" in which one I put all the HTML code, it worked but it doesn't detect the Angular's directives, and just a few styles of the CSS. I have CSS styles in the own component folder and in the folder styles.css, but the browser only detects some of the styles in the styles.css folder. The trigger doesn't work neither.
htmlToAdd : any;
this.htmlToAdd = '<p><button class="btn-sec app-btn-years" (click)="toggleDetails2019()" (click)="toggle2019()"><div *ngIf="text2019;then yearClose else yearDetails"></div><div [#showMonths]="status2019"></div>'+
'</button></p>';
I expect each time the browser is refreshed the web site show the code inserted in the component.ts with the CSS, the trigger and the angular's directives working, not only the html structure as it does right now.
I'm developing a web application using Angular 6.
I have a little problem: with this simple code inside in one of my services:
method() {
document.body.insertAdjacentHTML('beforeend', '<h1>Hello</h1>');
}
I can dynamically display html code every time I run.
This happens, however, only because <h1> is a native HTML tag.
How can I do the same thing with an Angular component associated with an HTMML template? For example, <myComponent></myComponent>,
it does not work this way ...
method() {
document.body.insertAdjacentHTML('beforeend','<myComponent>/myComponent>');
}
Can you help me with a solution that uses a few lines of code?
I have to use this method in a service. Thanks.
I have an angular app, it has a bundle and a piece of HTML that contains a root selector
<app></app>
where the app is bootstrapped.
Is it possible to somehow render a component from that app outside this app container? In the HTML, having something like
<component-name></component-name>
The reason for this is this app is being loaded externally for analysing only components one by one, and not the app as a whole, sort of like a style guide for the components in the app. So I load the bundle and I want to be able to render only a component that the user chooses.
Just add any components you need to the bootstrap array that is passed to NgModule:
#NgModule({
declarations: [AppComponent, ContactFormComponent],
imports: [...],
providers: [SharedService],
bootstrap: [AppComponent, ContactFormComponent]
})
export class AppModule {}
and now voila this works:
<html><body>
<app-contact-form></app-contact-form>
============================================
<app-root></app-root>
</body></html>
Just learned this from the plunker in the answer Günter linked above. very cool. tested with angular 6
You can bootstrap multiple elements. You can inject a shared service to be able to communicate between components of different Angular2 applications (on the same page).
How to dynamically create bootstrap modals as Angular2 components?
So I have a website set up and I wish to dynamically load other .html files into a div. Each .html file contains some content but 1 .html file contains its own angularjs directives.
I was using ng-bind-html along with $scope.content = $sce.trustAsHtml(data); but I have discovered that this prints out the html raw (does not process any angular directives).
I've tried to use the various solutions on stack overflow but none have worked for me.
Website: http://algorithmictrading.azurewebsites.net/
App.js: http://algorithmictrading.azurewebsites.net/js/app.js
Example of .html pages being loaded:
http://algorithmictrading.azurewebsites.net/includes/home.html
http://algorithmictrading.azurewebsites.net/includes/about_us.html
.html page that contains angular directives:
http://algorithmictrading.azurewebsites.net/includes/download.html
As you can see, if you navigate to the website and click on the 'download' tab, the content is loaded but the angular in the drop down menu is not handled. The test button I added should also produce an alert box.
Right now, the code is based off this thread:
call function inside $sce.trustAsHtml() string in Angular js
Thanks!
I found that angular was stripping out the directives from html strings if I didn't pass them through the $sce.trustAsHtml method before passing them into the template:
$sce.trustAsHtml('<a href="/some-link" directive-example>link to add</a>');
This combined with a watch/compile on the element's content you're inserting html into seems to do the trick:
scope.$watch(getStringValue, function() {
$compile(element, null, -9999)(scope);
});
Take a look at this example: http://plnkr.co/edit/VyZmQVnRqfIkdrYgBA1R?p=preview.
Had the same problem this week and the best way I found to make it works was creating a custom directive called "BindComponent".
Change the ng-bind-html directive to a custom directive, and inside the link method you put this:
element.html(markupModel);
$compile(element.contents())(scope);
The markupModel can be a string with html code or you can use $templateCache($templateCache docs) to get the code from a .html file.