I am working on an Angular 5 application with a sidepanel containing a master/detail view. I want to be able to maximize the detail component in a modal dialog, by pressing a button in this detail component - basically the behaviour one could expect from a regular desktop application's maximize functionality.
I have no problem displaying a modal with a component using eg. ng bootstrap, however i have many different components serving the role of the detail component, why i need do something a long the lines of injecting the component into the modal.
Basically aiming for a template file of the modal looking like so:
<whatever-app-is-injected></whatever-app-is-injected>
Well aware that a lot of material is available on modals, however haven't come around anything addressing dynamically setting the content component of a modal dialog.
Cheers!
I assume you are using ngBootstrap? If so, You can use their "component as content" feature.
http://plnkr.co/edit/BODdwmHFEOyHTcNF1PZf?p=preview
Basically, You have to hold a reference to your angular component as a variable, and pass it into their method.
inject their modal service
constructor(private modalService: NgbModal) {}
on open, pass in the reference to the component. In the example, the dynamic component they want to pass in as content of the modal is called NgbdModalcontent.
open() {
const modalRef = this.modalService.open(NgbdModalContent);
modalRef.componentInstance.name = 'World';
}
Hope this helps :)
Related
I am building a React app and wanted to determine the cleanest way to achieve the following behavior.
I have a List component that renders N Details components. Each Details component has a Connect button component that will trigger some behavior. There are 3 different behaviors:
immediately make API call, which requires no state change
open a modal and make an API call based on values in the input modal, which involves changing app State to render a modal, and then making an API call when they confirm the modal
open a pop-up window and make an API call based on returned values from that pop-up window.
To achieve this, I can pass down 3 separate callbacks to the Connect button component, and switch based on the value of the Detail component so it knows which callback to pass. However, this means the Detail component has some "switch-on-type" behavior. For example,
if (this.props.name === `immediate-connection`) {
callbackToPass = this.props.callApi;
} else if (this.props.name === `trigger-modal`) {
callbackToPass = this.props.changeStateToRenderModal;
}... // etc.
I could also build 3 separate components that encapsulate the behavior and have them render from Details but this doesn't avoid the switch-on-type behavior.
Another way to phrase this question is how to get identical behavior from the Connect buttons when their implementation is different? Do I encapsulate this behavior in a sub-component rendered by the Connect button or do I lift it it up to when State would be changed?
I followed this post to create a custom modal. Everything works as supposed except putting other Angular components inside the <div class="modal-body">.
The template and CSS of the inserted components loads but the javascript just doesn't work.
How is it possible to insert working Angular components into such a dialog?
for all the dynamically called components( those components which we are not mentioned in the template by the template selector) should be added to the entry components. If we do that Angular will instantiate the component for us.
The best practice is to mention the components in the component declarations and if there is any dynamically created components, add them into entry components. Everytime we add components to entry components it cost us the performance. try to reduced the entry components :). Hope I answered your query.
This question is about the correct way to create a general modal that using ReactJS, that will be used across multiple components in the application.
Apparently, we have two ways to manage a modal:
Looking at libraries as react-modal(https://github.com/reactjs/react-modal) that utilizes the state to control the modal with a visible property and a close method.
As this medium article (https://medium.com/#danparkk/react-modals-scalable-customizable-neat-components-f2088d60f3d3) utilizing a state manager as Redux, Flux, ...
What is the "correct way"? Rewriting a state to a modal everytime you use in the application, or making an action to change in the state of the application every time?
We can follow this approach Detect click outside element?
in Angular as well with HostListner.
In my component I have registered a host listener which listens on document click and hide the menu inside my component. This approach works fine with a single component.
However I am a bit concerned about the performance when the component is instantiated(in a list) 100 times each component registers document on click and do some processing to hide the menu opened from its component if any.
I can move the code outside the component list but then I need to hold references of each component to detect which one has opened menu and should be closed.
None of these two approach is perfect is there some other way to handle this efficiently as well as without leaking the component code in its parent?
Instead of setting the HostListener on the component, use it in a directive and set it on that component's wrapper. The wrapper could be an ng-container if you wish to not have template modification.
I'm new to Angular, and cannot really find any good and clean answer to this question.
In a component I have a few buttons and a list ('li').
When a button is clicked it should create and add an instance of another component to the list. The different buttons should add different components.
I've successfully managed to add new instances via the componentFactoryResolver, but are having a hard time animating them the they are created or removed.
What would be a "correct" way (as the Angular team intended it) to dynamically add and remove components and animating it?
What you're looking for is navigation using Router.
I created a plunker here: https://embed.plnkr.co/sukXA2zRV7kEAq4MZDXY/
When you click A, an instance of Component A is created and added to the DOM and when you click B, the instance of A is gone and an instance of Component B is created.
HostComponent is the component where it has child routes defined. Notice how in the component, you don't actually reference any of these "child" components at all. The parent child route relationship is defined inside the app-routing.module.ts.
I recommend taking the time to read the Router guide from start to finish as this is one of the key aspects of developing in Angular 2:
https://angular.io/docs/ts/latest/guide/router.html
Good luck!
EDIT Added route animation for ComponentA and updated plunker link.