I am creating a News Reader application using JSON. If I click the item in the list view, Details page is open. In that Details page image, title, and paragraph is placed on that page, as an item in the list view. I got doubt about that 1. If I clicked the item that image, title, and paragraph pass to the other page 2. Pass only id details page using id fetch the image, header, and paragraph help me to solve this
You can user Navparams
Example
home.ts
goToDetail(item){
this.navCtrl.push(ProductPage, { item: item });
console.log(ProductPage, { item: item });
}
home.html (give click function)
(click)="goToDetail(item)"
and you can use code
this.item = this.navParams.get("item");
in bottom constructor
Related
I am working on one application which has top nav menu which is always there on all the page and there is one page called customer profile(http://localhost:4200/profile) on which i am displaying Account Info,Change Password,Address etc as a Side Menu and when user click any of the one say Change-Password then url will change to http://localhost:4200/profile/change-password and if clicked Address then url changes to http://localhost:4200/profile/address.
Side menu should always be there till user is at /profile and display content of that selected menu(like change password or address etc).
I read about the auxiliary routes but in that i see URL is change something to http://localhost:4200/profile/change-password(profile-sidebar:side-menu).
But i don't want this(profile-sidebar:side-menu) thing is the URL.
Is there any other alternative way in angular to achieve the same thing?
Thanks in advance.
You can add the side menu inside your root component and just display it if the route starts with '/profil' wich can be checked through the router service :
component ts
...
constructor(private router : Router){}
urlStartsWith(path : string) : boolean {
return this.router.url.startsWith(path) ;
}
component html
...
<app-side-menu *ngIf="urlStartsWith('/profil')"></app-side-menu>
...
'app-side-menu' is your side menu selector.
I am new to front-end dev, application is in Angular 7
My homepage contains list of items, clicking on each item will redirect to another page. While navigating I want the title bar (third component) to update with respect to the item which I clicked. Right now it only updates if I manually reload the page
I am using router for navigation
router.navigate([route]);
.......EDIT.............
I have tried the following link....
https://medium.com/#rakshitshah/refresh-angular-component-without-navigation-148a87c2de3f
but it is throwing error - Object is unsubscribed,
Also tried activatedrouter instead of Router
try to update the title with this
function updateDiv()
{
$( "#here" ).load(window.location.href + " #here" );
}
you can change #here(id) for .class(class) which you ill set on that title.it should update that part of a page without reloading
I refreshed the page after navigation. The navigation method is in router.
router.navigate([next]);
window.location.href = 'next';
next(string) is the path- where you want the current page to navigate.
I am new to Angular. I am implementing a web project using mean stack and Angular 6. There I have to open a panel and there is a menu. I want to open different html views in different components when click menu items.
For example, I have a panel which contains the menu in the left side.This is in 'dash' component. In that menu there is a menu item called 'Maps'. When I click on menu item 'Maps' it should display the view of the html in 'maps.component.html' file. Here 'dash' and the 'maps' are two different components.
What I have tried.
Defined a booloan variable called 'isMap' in dash.component.ts file. Set its value as false at the begining.
Changed the variable's value to 'true' when item's title equals to 'Maps'
eg:
//Select the relavant view according to the selected menu item
onContecxtItemSelection(title) {
if (title == "Maps") {
this.isMaps=true;
}
}
Wrapped the html in maps.component.html using a div and set the 'isMap' variable using an '*ngIf'.
eg:
<div style="float: right; " *ngIf="isMaps">
<p>Map page</p>
</div>
My first question is,
When I click on the menu item it does not show the content of maps.component.html
Second question is,
'isMaps' variable in maps.component.html shows following error.
'[Angular] Identifier 'isMaps' is not defined. The component declaration, template variable declarations, and element references do not contain such a member'.
I tried importing the 'maps component' to 'dash.component.ts' file as well. But did not work. So I removed that part.
I am trying to make a delete option for some items I have in a list. The way I am doing this is to give every item in the list a button or a link of some sort that will use POST to send the _id (from mongodb). As you can see in the code below (req.body.id), I'm trying to get the id form the request. However, the request does not have the id, because I don't know how to do this without using a form and a input field.
I've seen some ways to do it with javascript in PHP. But is there a more jade and node.js specific way?
router.post("/deleteitem", function(req,res) {
var db = req.db;
var collection = db.get("itemcollection");
id = req.body.id;
collection.remove({
"_id": id
}, function (err, removed) {
if (err) {
res.send("Error");
}
else {
res.redirect("editlist");
}
});
});
Thanks for the help.
Edit:
Client-side:
extends layout
block content
h1.
Items
ul
each item, i in editlist
li
p #{item.name} costs #{item.price}
button#btnSubmit(type="button",method="post",action="/deleteitem") Delete
a(href="/") Back to start
The button part is not very relevant though. Firstly I am not sure if it's possible to do it this way. Secondly I have not included the id in any way. I was just experimenting.
One way I could probably do it is to include the id in the url as a parameter. But that seems a bit more convoluted than just using POST and including the id in the request.
You need to expose the POST data to the req.body object using an html form, even if that takes the shape of just a button with some hidden data. You can do this using an input element alongside your button element inside of a form.
extends layout
block content
h1.
Items
ul
each item, i in editlist
li
p #{item.name} costs #{item.price}
form(action="/deleteitem",method="post")
input(type="hidden",id="id",value="#{item.id}")
button#btnSubmit(type="button") Delete
a(href="/") Back to start
This code assumes that each item has an id attribute.
With this you can get the id value via req.body.id in the next route that you submit to using the button.
I have a mainpage with a Button with some content. I want to open a second page or popup in witch i must have a longlistselector with X items in it. when i choose one of them i want to change the content of the button to the selected item.
I can make the main page and the second page i dont know how to send back the result to the first page. ?
if you are using "MVVM Light" library then you can use Messenger service Like this....
in second page after selection is changed send a message
Messenger.Default.Send<type>(message,token);
and then in the consructor of page 1 viewmodel
Messenger.Default.Register<type>(this,token,Method);
here token should be same as sender token....
then
void Method(type message)
{
button.content = message;
}
Use Popup to show your LongListSelector ,and when set popupElement.IsOpen=false; the set Button Content same as required,
If you wish to change content as selected list then use popupElement.IsOpen=false; on selection change method and get selected item there.
Remember use selection change method on page not inside popup child class.
If you are using a separate page to show the longlistselector, then you could try something like this.
//in long list page,
Void longlist_SelectionChanged()
{
PhoneApplicationService.Current.State["key"] = longlist.selecteditem;
NavigationService.GoBack();
}
//in your main page where the selected data has to be displayed..
protected override void OnNavigatedTo(System.Windows.Navigation.NavigationEventArgs e)
{
if(PhoneApplicationService.Current.State.ContainsKey("key"))
{
Button.Content = PhoneApplicationService.Current.State["key"];
}
}