Communicate between components when routing in angular 7 - angular-routing

here I'm routing one component to another using routerLink and also using [queryParams] to pass parameters.
RouterLink and everything works fine but when I pass parameters using [queryParams], all these parameters shows in the url which is not expected. Because I want to keep my url fresh and readable.
Example:
<html>
<div routerLink="/list/article" [queryParams]="{tag: 'news', order: 'asscending', largeImage="true"}
</html>
I don't wanna show my queryParams on the url. Is there any trick or any other ways to avoid this issue.
Thanks in advance sir.

Related

What's the "right" way to add Google Web Auth to Svelte/Sapper?

Giving Svelte/Sapper a look and am curious what the right way to add something like Google Sign-In for Websites to my app.
I have everything working from the example code they give you from the site above, but I've done it by adding the onsuccess "onSignIn" function to the template.html file which doesn't seem like the right way to do this.
Inside src/routes/template.html
<script src="https://apis.google.com/js/platform.js" async defer></script>
<script>
function onSignIn(googleUser) {
var profile = googleUser.getBasicProfile();
console.log("ID: " + profile.getId());
}
</script>
Inside src/components/Nav.svelte
<div class="g-signin2" data-onsuccess="onSignIn" data-theme="dark"></div>
The code above works fine because onSignIn has access to window, but it seems like I should be able to add this to the Nav component where the button itself lives. Is there a preferred way to handle something like this?
If anyone is looking for something similar, I found this git repo that I was able to get started and modify to suit my needs github.com/beyonk-adventures/svelte-social-auth.

Unable to fetch page properties in the head script

I am trying to get a page property in the head of my page basically to make it universally available so that the front end developers can use it in their scripts as they will.
This is on AEM 6.3. And I've already tried to include a script in the head.html but it can't read the page properties in a script tag.
<script>
window.myAppEndpoint = {
baseURL: "${properties.myappendpoint}"
};
</script>
I expect the window object to populate with my endpoint value be able to use it anywhere in the application.
You should be able to do this provided:
The myappendpoint property is defined for the page jcr:content node
You are using the proper display context: baseURL: "${properties.myappendpoint # context='uri'}"
You can create a global object in js and include that js in the clientlib at the template level.
Or use the global objects available in HTL. Please have a look here.

Angular4 - Change state from component not template

In AngularJS I used ui-router for redirecting inside of my app(changing state).
It has 2 possible options to redirect
In template ui-sref='stateName'
In controller $state.go()
I just start play with Angular (4) and I found only way how to change route from template with something like:
Template routerLink="routePath"
Is there some way as there was in ui-router to change route from component?
constructor(private router:Router) {}
changeRoute() {
this.router.navigate(...)
// this.router.navigateByUrl(...)
}
See also https://angular.io/docs/ts/latest/api/router/index/Router-class.html
you can navigate via router like this
router.navigate([URL])
or like this
router.navigateByUrl('whole_string_containing_full_path')
Here router is an instance created in constructor, which is imported from router firstly, basically there is no difference between these two
First one accept array where as second one accept url in the form of string.

symfony : how to get rid of ugly GET parameters

i'm using form filtering to filter data in the frontend.
The problem is that the URL is ugly
http://............./players/game/?st_player_cv_filters[location_id]=1&st_player_cv_filters[plateforme_id]=3&st_player_cv_filters[level_id]=3&st_player_cv_filters[_csrf_token]=023c5c9fb5fc7e7b6ed60d6839c36f67
(form rendered with :
<?php echo $form->renderFormTag(url_for("game_player", $game), array('method' => 'get')); ?>
<table><tr><th><label for="location_id"><?php echo __('Country'); ?></label></th><td><?php echo $form['location_id']; ?></td></tr>
How to render this url in a better way please ?
Thanks
Using the framework/API itself is a good idea if it supports your needs. By the sound of your question, you can likely use the Symfony routing API to faciliate a solution...
For example, this book chapter covers it:
How to configure the routing rules to
change the appearance of URLs
Futhermore it speaks about long querystrings that you mentioned:
For instance, a traditional URL
contains the file path to a script and
some parameters necessary to complete
the request, as in this example:
http://www.example.com/web/controller/article.php?id=123456&format_code=6532
and speaks about the associated problems:
The unintelligibility of URLs makes
them disturbing wherever they appear,
and they dilute the impact of the
surrounding content
The chapter provides HOW IT WORKS: examples of how to change your URLs using configuration and programming.
You should be able to maintain bookmarkability through easier to read/less complex/more secure URLs.
sometimes when I run into this problem I run a redirect from the receiving page for the form to itself using symfony's redirect method.
$this->redirect('.../formAction?'.http_build_query($get_vars));
OR
use the url_for() method and such as:
<form action="<?php echo url_for('.../formAction?'.http_build_query($get_vars)); ?>">
...
</form>
If you have the option, you could use POST rather than GET. That would clean up the url significantly.

Get displaytag to use an action URL for page switching

I'm trying to use external paging in a JSR-286 portlet with DisplayTag 1.2.
I would like DisplayTag to generate the paging links from a parameterized Action URL that i have defined, but i can't seem to make that work.
Here is the code in my JSP:
<portlet:actionURL var=actionUrl >
<portlet:param name="someParam" value="someValue" >
</portlet:actionURL >
<display-el:table id="personsTable"
name="${portletSessionScope.persons}"
requestURI="${actionUrl}"
partialList="true"
size="${portletSessionScope.total}"
pagesize="${portletSessionScope.pageSize}" >
<display-el:column property="firstName"/ >
</display-el:table >
With the above code, it looks like Display-tag ignores the provided ${actionUrl} and generates a default Render URL. The generated links work fine (i can move through pages), but since my portlet requires an Action request to fetch other pages of data, the list in the session is never updated and the table always contains the same data, regardless of which page i select.
Is there a way i might make that work? Does DisplayTag support what i'm trying to do?
Thanks in advance for your help!
Create a form in your JSP and pass the form name to the displaytag:table as form attribute value. This will invoke the action URL that you have specified.