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.
Related
I have a component menu which contains a few anchor tags. Each tag brings the user to that respective page section. I am trying to share the same anchor tag among the other components.
For example, I have two more HTML components called homepage.component.html and details.component.html. For each I call the menu.component.html by its selector. Both homepage and details html components have an id for the section I wanna scroll to. Here's how it looks like:
menu.component.html
Go to content
for both homepage.component.html and details.component.html
<div class="home-content" id="content"> Here comes more code </div>
It should work just like in a non-dynamic html project, however, when the anchor tag is clicked, the url redirects to '' (which is the first/default page) and then it shows the content for the first page, instead of the current componenet I am on.
I have tried creating a function where I get the current url and using the router.navigate, I pass the parameters indicating the fragment:
menu.component.ts
currentRoute: string
scrollToItem(){
this.currentRoute = this.router.url
this.router.navigate([this.currentRoute], {fragment: 'content'})
}
menu.component.html
<a (click)="scrollToItem()">Go to content</a>
However, this function adds the id #content to the url each time the anchor tag is clicked, redirecting the user to my 404 page.
I wanted to know if there is a way to use an anchor tag on the menu.componenet.html, while all the items that have "content" as their ids in different components are going to be displayed. Hopefully I made my question clear. If there is still questions about how the error occurs I can create and shate a stackblitz project. Thanks in advance :)
I am looking for a way to go from my navigational links using voice-over accessibility to jump to the internal part of the page that link I connected to.
For example:
I have a list of links on my left-hand side. One is for Forms. When I click on "Forms" my list of forms will populate to the right of that panel, and then if you click on a specific form, that Form will appear to the right of that panel. The page contains 3 panels with Navigation on the left, list in the middle, Form on the right.
Right now if I click on the Form link, I have to tab through my entire nav panel to get to the newly opened Forms list.
Are there some ARIA elements I am missing that will help tab directly into my Forms List from the Forms link?
There are two simple ways to do this.
Note that neither of the following ways need any aria to work, the aria in the following examples is purely for best practices when adding sections and headings to a page.
Option 1 - anchors
The first is using anchors pointing to ids on the page.
in your side bar
forms
main page section
<section aria-labelledby="forms">
<h2 id="forms">Forms</h2>
<!---your forms --->
</section>
Notice how I gave the page content a heading (pick an appropriate heading level) and then labelled the section with aria-labelledby. None of this is required to make this method work but it is a good practice.
The only thing you need to do is to make sure your href matches the ID of the heading.
However given that you are populating the forms on the right side of the page (I am assuming with an AJAX call) you may want to manually manage focus with JavaScript....
Option 2 - Use JavaScript and .focus()
If you are using JavaScript it is a similar principle, give the section heading an ID, but this time once the forms list has loaded set focus on the list heading.
html
<!--your link in the menu -->
forms
<!--section on the page, I omitted the aria here for clarity / simplicity but it is still needed-->
<section>
<h2 id="forms" tabindex="-1">Forms</h2>
</section>
JavaScript
// start: however you have this implemented at the moment
const formsLink = document.querySelector("#getForms");
formsLink.addEventListener('click', function(e){
e.preventDefault();
get('yourURL').then((data) => {
// populate the list
list.update(data);
// end: however you have this implemented at the moment
// once the list is populated set focus on the heading (last thing to do after everything else is done)
document.querySelector('#forms').focus();
});
});
Notice how in this example the <h2> has a tabindex="-1".
We need this to allow programmatic focus. We use -1 so we can focus the heading via JavaScript but it does not get added to the page focus order (so you can't access it with Tab).
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
I am having a mega drop down menu with big icons against each menu item. Does the BOLT menu provides a URL option too where I could save the url of that icon and output that Img URL value in loop?
main:
- label: Home
title: This is the first menu item.
path: homepage
class: first
#imgurl: url <- SOMETHING LIKE THIS #
Using class is another option but i don't really want to use CSS pseudo selector here to add background image. Is there any other possibility?
just add the imgurl option to the config. In your template you can access it like item.imgurl.
When you look at the default menu implementation, you see that it iterates over the menu items where it calls a function that renders the menu item + any sub menus:
https://github.com/bolt/bolt/blob/release/3.0/app/theme_defaults/_sub_menu.twig#L40-L42
And as you can see in the following link, you just access the options defined on the menu entry.
https://github.com/bolt/bolt/blob/release/3.0/app/theme_defaults/_sub_menu.twig#L20-L22
I have a nav.shtml file in which I am setting a class on the current menu item as follows:
Faculty'>http://root/level1/level2/page.shtml">Faculty & Staff
This is fine for the top-level pages, but a few have subpages and I would like to be able to set the class on the top-level menu item if the current page is a subpage as well. E.g. There is a "Faculty/Staff" menu item which goes to an overview page, faculty.shtml, then there are some links on that page to individual faculty/staff pages in a subdirectory. If I'm looking at one of the individual subpages, I still want the class to get set on the "Faculty/Staff" menu item.
So, I need something like:
"if $DOCUMENT_URI=/level1/level2/page.shtml *or* if $DOCUMENT_URI=/level1/level2/level3/*.shtml".
I can't seem to figure out the correct syntax... Can anyone help me out?
The following should work for you, based on the example provided:
<!--#if expr="$DOCUMENT_URI = /\/level1\/level2\/page\.shtml/ || $DOCUMENT_URI = /\/level1\/level2\/level3\/.*.shtml/" -->