I am creating component based Angular app using Angular version 1.5.5 and typescript. In the header component I have country dropdown. That header component is re-used in multiple pages. Once the country is selected from the dropdown that particular scope lies only for that page, once I navigate to other page its got lost.
Is there any better way to reuse the component based on my scenario?
Few suggestions,
You can make use of $rootScope since its globally available, keep the country in $rootScope so that once you changed the model it will be available in the other pages as well
I don't know whether its suits your situation, If you are using angular routing keep the header component outside ng-view so that it will not change will navigating through different pages.
Related
I am trying to prevent the situation where code is injected multiple times when revisiting a previously viewed Route.
In a conventional site, the page is reloaded, and thus all the tags and their content need to be downloaded again, but in React, using react-router-dom, the history is changed without a page refresh. This leaves the previously injected code on the page.
I'm trying to gauge if the logic for restricting when a tags content should be injected into the React app belongs in:
GTM Trigger
GTM Tag
I cannot find any documentation for achieving this in triggers (as tag firing options->once per page doesn't work in this case), but achieving it in the tag code could be as simple as checking for the existence of an id wrapping the tag code, and preventing injection if it is already present.
Any suggestions?
I'm using a hybrid AngularJS/Angular application and my use case is I want to click a button, which is in my AngularJS code, that will trigger a mat-dialog component that I've written (which also works with other Angular components). My question is how can i get this mat-dialog component to trigger from AngularJS.
I've tried playing around using $mdDialog.show({}) with various properties such as trying to point it to the template of the mat-dialog component and trying to pass in my scope variables that the Angular component needs access to but with no such luck
I figured out that I can solve this problem by adding another #Input() to another Angular component that is already using my mat-dialog component. Then make sure that this angular component is implementing onChanges to watch for changes to the input variable. When changes are detected then I can trigger a method to kick off the mat-dialog.
I am using angular 1.5 component router. I need to be able to change the title shown on the browser tab whenever there is a route change.
I have gone through the component router docs and googled it to many a websites but without any luck. The only way I can see to do it, is using vanilla JS inside each component's $onInit method.
I am looking out for an angular way of doing it and setting all the titles in one place. Please help.
Is there a reload/refresh or like the Angular 2 version a renavigate method for the now deprecated (but much too late for the current project already built on it) component router for AngularJS 1.5?
Currently in order to destroy the route components and reload them I had to create a dumby route at the same level that I switch to and then back in order to force the components to be destroyed and then be rebuilt due to the view being composed of dynamic form fields.
I'd also be interested in any other suggestions if no API call exists to refresh a route.
The answer was to use $routerCanReuse and explicitly return false (since we don't have any other logic to apply), which when you reroute to the same route will now destroy and recreate the components allow for the dynamic forms to be re-rendered.
I'm reading the component page of angular docs, and there is a note:
An application is a tree of components: Ideally, the whole application should be a tree of components that implement clearly defined inputs and outputs, and minimize two-way data binding. That way, it's easier to predict when data changes and what the state of a component is.
My question is:
In an application that have the architecture Component > Controller > Model > Service, should the Controller be a Component or just be a Controller?
in angular 1.x a component is a combination of a directive+controller+template, if you are using a router, like ng-route or ui-router, you cant avoid using a controller. angular 2 is difffernet in this case but thats a whole other story.