Develop Reference

Is it possible to create a React Styled Component that has a predetermined structure with the option to set the element dynamically?

I have been working a lot with styled components in React recently. In the beginning I created a component for each element, so for example a file called "Button.tsx". In this case, this file would return a styled button.
I have noticed lately that creating a styled component can be time consuming and it also becomes a lot of "unecessary" code according to me.
It would have been awesome if it was possible to create one file called "Component.tsx" instead that returns a styled component. This would save a lot of time and would also make one file look messy instead of a bunch of files. I have tried this and it works just like i want to (almost).
The problem I am having right now is that the styled component gets rerendered by React since it is called inside of a function. An easy fix would be to just move the styled component outside of the function but that way it wont keep track of the argument that is passed in which is necessary for the styled component to know which element it should render. I don't know. Would this be possible? I'll attach a/some screenshot/screenshots. Reusable styled component

Maximize a component as a modal angular 5

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 :)

Programmatically add/remove component with animation in Angular

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.

How to update Parent Component data from Child Component without two way data binding in angular 1.5.x?

Sorry if it's a silly question but i am a noob in angular 1.5.x
I am using es6 class based components with one way data bindings throughout the app(best practices as far as i know).
I have a Container Component.
It has a Sidebar Component and a Content Component.
I fetch the menu options (array or object) in Container Component and pass it to Sidebar Component and Content Component using one way data binding as attributes.
I want to update the Container Component whenever i change menu options in Sidebar Component or Content Component and it should be reflected in both the child components.
I don't seem to find a way ( without two way data binding ) to do it in angular 1.5 without using $scope events or Service.

React: detect when all children components have been loaded

I'm doing an implementation in which I need to detect when all children components have been loaded, from a multi-level hierarchy.
Example: MAIN component have a WORKSPACE component, which can have multiple COLUMN components and each COLUMN can have multiple WIDGET components.
Each widget is rendered after ajax calls (have to fetch some data in the server).
I need to detect when all WIDGETs components have been loaded (after async calls) in MAIN component.
I do not know which is the best approach/pattern to do this.
I know I can use some callbacks in each component to tell the parent that the component is loaded and then do this recursively, but I'm looking for a solution that solves this without having to deal with each level of the hierarchy.
Is it possible?