What is the difference between component and directive?

Basically there are three types of directives in Angular2 according to documentation. Component Structural directives Attribute directives Component It is also a type of directive with template,styles and logic part which is most famous type of directive among all in Angular2. In this type of directive you can use other directives whether it is custom … Read more

Adding / Removing components on the fly

As suggested by Tim, quoting @tbosch’s comment Angular reuses previously created DOM elements by default So to avoid this behavior, taken from the comment as well, you can use APP_VIEW_POOL_CAPACITY and assign it 0 as value. bootstrap(MyApp, [provide(APP_VIEW_POOL_CAPACITY, {useValue: 0})]) Update Note that since beta.1 APP_VIEW_POOL_CAPACITY was removed by #5993 and the DOM is being … Read more

React – Dynamically Import Components

I think there may have been some confusion as to what I was trying to achieve. I managed to solve the issue I was having and have shown my code below which shows how I solved it. Separate File (ComponentIndex.js): let Components = {}; Components[‘Component1’] = require(‘./Component1’).default; Components[‘Component2’] = require(‘./Component2’).default; Components[‘Component3’] = require(‘./Component3’).default; export default … Read more

React functions inside render()

A function in the render method will be created each render which is a slight performance hit. It’s also messy if you put them in the render, which is a much bigger reason, you shouldn’t have to scroll through code in render to see the html output. Always put them on the class instead. For … Read more

ReactJS difference between stateful and stateless

Yes, that is sort of the difference. Except with the stateful component you can also change the state, using this.setState for example: var React = require(‘react’); var Header = React.createClass({ getInitialState: function() { return { imageSource: “mypicture.png” }; }, changeImage: function() { this.setState({imageSource: “differentpicture.png”}); }, render: function() { return( <img src={this.state.imageSource} onClick={this.changeImage.bind(this)} /> ); } … Read more

What is the difference between User Control, Custom Control and Component?

The main difference between User Control, Custom Control and Component is that they inherit from different levels in the inheritance tree: MyComponent |-> Component MyCustomControl |-> Control |-> Component MyUserControl |-> ContainerControl |-> ScrollableControl |-> Control |-> Component So, in short you get a different amount of pre-wired functionality with the different options. When would … Read more

React showing 0 instead of nothing with short-circuit (&&) conditional component

Since your condition is falsy and so doesn’t return the second argument (<GeneralLoader />), it will return profileTypesLoading, which is a number, so react will render it because React skips rendering for anything that is typeof boolean or undefined and will render anything that is typeof string or number: To make it safe, you can … Read more