Im new to angular and i have created website using angular. When i Login it shows the username in the top of the page(shown below)
my requirement is, when i click it i want to take the user to another(for example user details page) But what i have done in my .html and .ts files doesnt do anything
The relevant html code part
<div class="m-2">
<i class="fa cursor-pointer" (click)="Navigatekbuttonclick($event)">{{username}}</i>
</div>
the relevant .ts part
Navigatekbuttonclick(){
this.router.navigate([/userdetails]);
}
Can anybody help on this navigation part please and tell me whats missing
The path you passing in parameters needs to be in quotation marks.
Try this:
Navigatekbuttonclick(){
this.router.navigate(['/userdetails']);
}
But in order for that to work, you must define the route in your router :
{path:'/userdetails', component: userDetailComponent}
Here's a link that can help you : Angular Documentation
Related
Sorry if this is a dumb question, its my first time doing web dev. Also, first time asking a question here. I am trying to get my read more / read less button to work. It worked once and upon refreshing the page it stopped working. I am running a script in a separate js file to toggle my button. And i run the script using the script tag directly in the page. Any help will be greatly appreciated. Also, this is a react App. Upon clicking the button the user should be able to see the text within the span tag.
Code in main.js
document.addEventListener('DOMContentLoaded', () => {
const readMoreBtn = document.querySelector('.read-more-btn');
const text = document.querySelector('.text');
readMoreBtn?.addEventListener('click', (e)=>{
text.classList.toggle('show-more');
....
})
})
code in onlineClasses.js
<div className='class-container'>
<div className='class-list'>
<h1>VIRTUAL CLASSES</h1>
<div className="grid-class-container">
<div className="grid-item" >
<h4>SUNNAH PRAYERS - <i>CLASS TITLE</i></h4>
<p className="text" id="txt"> Class info.
<span className="more-text">More info about classes.</span></p>
<button className="read-more-btn" id="btn">READ MORE</button>
<Helmet><script src = './main.js'type="text/jsx"></script </Helmet></div>
I tried putting the script in different parts of my project. I tried using quearySelector() and getElementById(), i know react uses states and effect, im not sure if i would have to use that. I had some errors in my console, but i resolved those.
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 want to override the Login module. I have created the override in the html folder, but I can't seem to find the upmost div with class="login" that is visible when viewing the original Login module with Firebug. I have searched all files in mod_login.
I want to place the following above the module:
<div class="item-page">
<div class="page-header">
<h2 itemprop="name">Login</h2>
</div>
</div>
Thanks in advance
EDIT: I'm using Joomla 3.4.6. Login_Module is in it's original state.
Based off the limited information provided...
You should only have to place the default.php file from /modules/mod_login/tmpl/ into /templates/[template_name]/html/mod_login/ to override the frontend module.
To modify the module for the administrator side, you would copy /administrator/modules/mod_loing/tmpl/default.php to /administrator/templates/[template_name]/html/mod_login/default.php
If the code you're trying to edit isn't in that file, then you may want to try looking at the com_users component which has the file: /components/com_users/views/login/tmpl/default_login.php and see if that's what you're looking for.
I have a simple image viewer webpage on gitpages but before I push the next group of images I want to condense all of my images into an array using angular.
The test I have made here uses only 4 photos that are in the same folder as every other file.(they are jpegs)
my js file is set up like this with a factory for the array and a controller.
angular.module('beamModule',[])
.factory('imageFactory', function(){
return {
getImages: function(){
return ['beam1.jpg','beam2.jpg','beam3.jpg','beam4.jpg'];
}
}
})
.controller('Photos', function(imageFactory){
this.images = imageFactory.getImages();
});
I don't think anything is wrong with this array but maybe I am overlooking something?
The HTML that I am using and the section that is giving me trouble when I check the developer tools is below.
<div class="imgcontainer" ng-controller="Photos as photosController">
<img ng-repeat="src in photosController.images"
ng-src="beamModule.js/{{images}}">
</div>
I am not sure if I am supposed to be using an ng-class attribute in the css or if there is something else that needs removed?
The developer tools are returning this value for each of the images (they are repeating just not showing)
<img ng-repeat="src in photosController.images" class="ng-scope">
Why is the ng-scope class being put in here and the ng-src is being removed?
EDIT FIXED
Ok to the person who answered so quickly and simply you are the real mvp here.
You said to change the ng-src="beamModule.js/{{images}}" to read {{src}} instead.
Once I tried this it still didnt work but then I checked the dev tools and noticed it was attempting to pull the files from the js file and not the actual file so I just changed it to this and now it works great! Thank you.
ng-src="{{src}}"
The ng-src attribute needed to point to the repeat instead of the js file.
ng-src="{{src}}"
I have two html pages: /algorithrms and /algorithms/add written in scala template. The route file contains following lines:
GET /algorithms controllers.Application.algorithms()
GET /algorithms/add controllers.Application.newAlgorithmForm()
I want to add a button in the page /algorithms and when I click that button, it simply redirects to the second page /algorithms/add. I know how to do this in JavaScript. I just want to call an action from the button click and then let the action redirects me to the landing page.
So I added the following code in the first page's html template:
#form(action=routes.Application.newAlgorithmForm()){
<input type="submit" value="Add">
}
It worked, but the landing url is: http://localhost:9000/algorithms/add?
I don't want that question mark. I want to know 1) what I did wrong to cause the question mark to generate and 2) how to remove it?
I do not know if you use Twitter bootstrap, but hyperlinks can look like buttons too, and the redirect to another page sounds to me like a plain hyperlink:
<a class="btn" href="#controllers.routes.Application.newAlgorithmForm()" >
#Messages("add.newAlgorithmForm")
</a>