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?
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 faced an issue inside my project, *ngFor doesn't work inside the modal component, and works anywhere else. I import BrowserModule in the app component, and commonModule elsewhere.
There is no spelling mistakes.
I am sure the declarative is clearly declared.
The error is:
Can't bind to 'ngForOf' since it isn't a known property of 'li'
Any help?
I just found the answer in this link:
Add the component to your app.module
Where you should add the Modal component in the root app module:
First import the Modal page in your app.module,
import {ModalPage} from "./home/modal.page"
then declares it inside declarations and entryComponents
declarations: [AppComponent,ModalPage],
entryComponents: [ModalPage],
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.
In my Angular web project I use different two or three types of header in many pages in Angular 4 project. Is there a way to code up your HTML header code and footer code just once and have it included or injected in one or more of your pages. To give some clue I need an alternative for #Section in ASP.NET MVC Razor witch in each page we can add an extra code to it (I know this is a server side thing, but I need it in angular client side).
Is there an official/recommended way to do this?
You should create components for that. Something like:
#Component({
selector: 'myheader',
templateUrl: './header.component.html',
styleUrls: ['./header.component.scss']
})
export class HeaderComponent implements OnInit {
...
And then add it to the template of the other pages where you want to use it (or to the app.component.html if you want it everywhere). Something like:
<myheader></myheader>
If you need different data on the header depending on the component you are at, just create a HeaderService, and pass data to the header from the component through it.
The question is on the same lines as this one, however the other way around.
I want to embed an Angular 1.x app inside an Angular 2 app. More specifically this app. I understand that there are ways to upgrade elements individually, however this being a large project, I simply want to embed this in one of my tabs on the Angular 2 app.
I tried a very naive approach where I copied the dist folder in one of my components and I am trying to use the same index.html with
<div ng-app="app">
<div ng-view="">
</div></div>
Now I am trying to load all the minifed javascript (which includes angular 1.x library as well as some app specific javascript files and css) into my main angular 2 app in its own index.html . Then I load the index.html from the dist directory through my component. The problem seems that Angular 1 library doesnt seem to load.
I have a few questions;
Would it help if the libraries(js) files are loaded as ts. I assume that it is possible to load Angular 1 and 2 libraries simultaneously.
If it would, is there an easy way to get the js files converted to .ts files.
EDIT
I got this to work by using the angular.boostrap call as shown below.
Following is my code snippet for my component
import {Component, AfterViewInit, OnInit} from 'angular2/core';
declare var angular:any;
#Component({
selector: 'server-monitor',
templateUrl: 'app/components/server-monitor/dist/index.html',
styleUrls: ['app/components/server-monitor/dist/styles/vendor-c0a35f80.css',
'app/components/server-monitor/dist/styles/main-0c4cc0e5.css',
],
})
export class ServerMonitorComponent implements AfterViewInit, OnInit{
ngOnInit(){
angular.bootstrap(document, ['app']);
}
}
However, now I have run into a different problem. The original project makes a lot of http calls very frequently(2 sec by default) to get live stats about the system.
When I run this embedded into my app, I can see the calls are made but my page keeps refreshing and doesn't show anything on the graph. I understand I have to modify something where it makes the http calls, but no sure where.
In addition to the above edit, I modified $routeProvider in the original app and it seems to work just fine