Load Angular 2 component to area - javascript

I have a website, where a settings dialog should be loaded in a specific are, when clicked on a button.
The settings dialog is a component which loads data from REST endpoints.
I don't want to insert the component and just hide it, since I want to save resources.
What's the correct Angular 2 way to do this?

You can use ngIf for that kind of purpose, it will insert element only if the condition is true
<div *ngIf="condition">
<!-- Content present in DOM only if condition == true -->
</div>
This way your data won't be loaded at runtime, but when the component is inserted (=> when the condition becomes true).
EDIT : Load based on shouldBeLoaded, then show / hide based on shouldBeDisplayed ; once shouldBeLoaded is set to true, its value should not change
<component *ngIf="shouldBeLoaded" *ngShow="shouldBeDisplayed">
</component>

There is 2 ways to do that:
<div [hidden]="condition"> content </div> it will create content, but hide it when condition is true
<div *ngIf="condition"> content </div> it will create content when condition is true, otherwise it won't

Related

AJAX causes inconsistent renderings

I am using Angular2 and have a template which uses ngFor to display a div DIV1 if a flag is true else to display another div DIV2.
This flag is retrieved with AJAX from the server in the ngOnInit() method of the component.
The problem is that if the flag is initialized to true bue retrieved as false then when the page is rendered initially DIV1 is rendered and very fast it disappears and DIV2 is displayed. This is annoying and the user can notice the temporary inconsistent view rendering (especially if the AJAX call is slow).
It is a simple case and therefore I don't provide an example since here I don't want to test if the aforementioned functionality works.
The question is how should I treat this and similar cases so that only the correct divs should be displayed?
You can add another flag that indicates if the value was already retrieved and wrap your content in an *ngIf or use hidden
<div *ngIf="realValueRetrieved">
<!-- <div [hidden]="realValueRetrieved"> -->
<div *ngIf="flag">
</div>
</div>
and set realValueRetrieved to true if it is false, otherwise don't change it.
Actually there are unlimited ways to handle that and it's up to you what you actually want. Display a spinner, display nothing, use an animation when the value arrives and the content is revealed, ....

How to hide/show adf component automatically

Hi I want to hide an adf component automatically.I have a selectOneChoice that contain some number (from 1 to 12).
Example when I select 2, it show's two field automatically without clicking any button..
i used this function to hide a declared componenet but just when i click a button..
function enableField(actionEvent) {
var nameInputText = actionEvent.getSource().findComponent("soc1");
nameInputText.setProperty("visible", true);
actionEvent.cancel();
}
i set the componement "soc1" visible = true than through the javascript function i change it..
SO the probleme here is how to read the number from the selectonechoise and how to set the component visible directly without clicking any button.
Actually Rendered won't do what you want. You want to use Visible property instead. Rendered causes the actual markup for the component not to be rendered on the page, so a Partial Refresh will not cause it to appear. Rendered is reserved, usually, to hide items that are secure. We set rendered property to false on the item(s), but then refresh the parent containing component - usually a layout manager - then it works. So either refresh the layout manager that contains the item or use Visible. I demonstrated this exact use case last week in class and it works as described.
Basicaly, you don't need javascript solution or any programming to achieve this.
You should set attributes rendered(this way component won't be rendered at the page at all) and partialTriggers that points to selectOneChoice component for components you want to show or hide. Also you have to set autoSubmit="true" for your selectOneChoice component.
<af:selectOneChoice id="soc1" autoSubmit="true" .../>
<af:panelGroupLayout id="plg1" partialTriggers="soc1">
<af:outputText id="ot1" rendered="#{bindings.lov.inputValue le 1}" inputValue="text1"/>
</af:panelGroupLayout>
Note: its not working code, just a sample
It will work following way, on valueChange event at selectOneChoice component value is submitted and partialRefresh fires for components that have it in partialTriggers specified. And rendered attribute will either render or remove component depending on it's EL expression. Components that should be managed wrapped into another component to make sure PPR reach it when they ain't rendered.

Hide parent view when displayen nested views

I want to hide a list of users when I to display the nested view users.info .
I wrote this code
HTML
<div ng-hide="hide">
the list of users...
<a ui-sref="users.info"> <button ng-click="hideUsersList()"> </a>
</div>
Controller
$scope.hideList = function hideList()
{$scope.hide=true;};
it works and hide the list when I click on the button, but the problem is when I use the back button in the browser, hide still 'true' and I get a blank page
If you only hide the DOM element, the scope remains and the hide variable is still attached to it with the latest value.
If I understand correctly, what you are looking for is maybe switching the nested views when moving between states, that way each time you move to a new state you'll be instantiating a new controller and a new scope.
Nested States, Nested Views

Keep $dirty status of form input field when switching views with ui-router

Is there an easy way to keep the $pristine / $dirty status of input fields inside a form which is wrapped around a nested view when switching the nested view?
My app has the following structure:
<div ui-view> <!-- main view - this stays active -->
<div ng-form="form.product">
Some content
<div ui-view></div> <!-- sub view - this changes and holds different parts of the form -->
<!--
the content of this inner view (its template) looks something like this:
<input type="text" ng-model="myModel.someProperty"/>
-->
</div>
</div>
The controller which holds the form data is on the outer view controller. When I switch the tabs (and therefore the content of the inner view), the values of the inner input elements always show the correct values. I can update the values, everything works fine, except one thing: The validation status is being reset.
When I change an input field, the outer form and the inner input elements get $dirty - but when I switch the inner view and then back again, the outer form is still $dirty but the inner input element is $pristine again, even though the input elements still hold the changed values and the outer form is still $dirty.
I think the input elements $dirty/$pristine status is being reset when the inner view is unloaded and then loaded again, although their values being updated immediately with the model values from the outer form when they come into view.
Is there an easy way to keep the $dirty status when I switch to another view without much additional code (like keeping track of changes to every singe input element by myself)?

Can I cache an empty form template as a second page in browser?

can I cache an empty form template as a second page in browser cache
so that when you click "create event" button on first page it immediately
opens empty form template without having a need to download the template
from the server as it's cached.
Just like CREATE EVENT button in Google calendar; which let's you to switch between calendar and new event form template.
Well, you can either use Javascript for building the new page from scratch when the respective action is invoked (probably quite tedious) or you can use an invisible section (e.g., a separate <div>) of the HTML page (style = display: none) and make it visible by changing its class to a visible style and making the original page invisible (change its style to display: none).
One way to accomplish this would be to load your second view into a hidden container. You can hide it with a simple CSS display property toggle, like this:
<div id="mySecondView" style="display: none;">
<!-- content of second view here -->
</div>
And on button click you can do this to unhide it:
With jQuery:
$('#mySecondView').show();
or
$('#mySecondView').fadeIn();
Without jQuery:
document.getElementById('mySecondView').style.display = '';
Of course you'll have to position the second view via CSS as you want it, otherwise it'll just pop up in some weird place that won't make sense.

Categories