What I want to do is to read the path as indicated with the #page attribute of every Razor Page, to link to it in the Nav Menu. With the purpose of not having to manually redo a href when for whatever reason I want to change the url.
I did however not find a way to read the page attribute from components, am I missing something or is there another way of doing this?
Just to visualise what I want, this is how it should roughly look in the end:
<div class="nav-item px-3">
<NavLink class="nav-link" href=UploadPage.page>
<span class="oi oi-data-transfer-upload" aria-hidden="true"></span> Content Upload
</NavLink>
</div>
The blazor framework doesn't expose any public APIs* to do what you want. You could perhaps post on github as a feature request.
*Internally, a route table is generated by scanning your assembilies for RouteAttribute.
Having said that, there is this blog post about using source generators to read the RouteAttribute of each component and generate the nav menu for you. Unfortunately, in order to use it, you have to turn off razor source generation to do it currently as source generators cannot see the output of other source generators. Hopefully in the future, we will be able to use source generators with the razor compiler (Here is the issue tracking it).
Thanks to the input by Jesse Good I found the following relatively simple answer to my problem, using reflection.
The Navmenu:
<div class="nav-item px-3">
<NavLink class="nav-link" href="#(PathTo<MyRazorPage>())">
<span class="oi oi-book" aria-hidden="true"></span> My ePaper
</NavLink>
</div>
The resolving Function:
private string PathTo<T>()
{
var attributes = typeof(T).GetCustomAttributes(typeof(Microsoft.AspNetCore.Components.RouteAttribute), inherit: false);
var route = (Microsoft.AspNetCore.Components.RouteAttribute) attributes[0];
return route.Template;
}
Related
In my component I subscribe some basic data:
ngOnInit() {
this.data.getBasics().subscribe(
data => {
this.basics = data
}
)
}
I use them in html like this:
<h1>{{ basics.surname }}</h1>
and it works perfectly fine. A few of basics are the links. Assume basics.mypage to be "http://mypage.com". I would like to use it as a href in my html document. Something like this:
<a href={{ basics.mypage }}>Go to my page</a>
but that way it sends me to
http://localhost:4200/%7Bbasics.mypage%7D
How to use this variable inside tag?
Just insert {{basics.mypage}} into quotes
Go to my page
Use ng-href:
<a ng-href={{ basics.mypage }}>Go to my page</a>
or check that the data is properly formatted.
Another way is also available thats called property binding.
<a [href]="variableName"></a>
or
<a [attr.href]="variableName"></a>
Always prepend your absolute external links with protocol or // shortcut for http:// OR https:// depending on your app's protocol.
<div class="inline-icon-text">
<small class="text-muted d-md-none mr-3">Link</small>
<a [attr.href]="'//' + candidate.url" target="_blank" [title]="candidate.url">
<i class="material-icons">open_in_new</i>
</a>
</div>
Browsers treat URLs as a relative by default to facilitate in-app navigation.
As a side note, this behavior is not Angular-specific; other frameworks and plain sites behave exactly the same.
This also a great way of doing that.
Use this instead.
<a ng-href={{basics.mypage}}>Go to my page</a>
This is what I can gather from the Angular API here: Angular ngHref
I am trying to change the value of a label in my HTML page on an event,is it possible to insert html code into the variable?
The HTML code is like:
<div ng-controller="welcomeCon" ><label>{{ welcomemsg }}</label></div>
and in some controller in the script:
$rootScope.welcomemsg="You are not logged in,please log in or register"
Is there a way to make the words log in and register to be links?
If no, I would be happy if someone could guide me what to do in alternative.
Thanks
Use $sce service. Here is the sample example
angular.module('app',[])
.controller("welcomeCon", function($scope,$sce){
$scope.loginHtml = "You are not logged in,please <a href=''>log in</a> or <a href=''>register</a>";
$scope.trustedHtml = $sce.trustAsHtml($scope.loginHtml);
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular.min.js"></script>
<div ng-app="app" ng-controller="welcomeCon">
<div ng-bind-html="trustedHtml">
</div>
</div>
OR you can use ngSanitize module
angular.module('app',["ngSanitize"])
.controller("test", function($scope){
$scope.html = "You are not logged in,please <a href=''>log in</a> or <a href=''>register</a>";
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0-beta.2/angular-sanitize.js"></script>
<div ng-app="app" ng-controller="test">
<div ng-bind-html="html">
</div>
</div>
You can do that as the other answers suggest by using the $sce service or ng-bind-html, but I would object to that approach because the links won't change, so why do it by defining the html in your code instead of in the html.
What you probably want is something like this:
<ul class="my-menu">
<li ng-if="$root.loggedIn">
Logout
</li>
<li ng-if="!$root.loggedIn">
You are not logged in, please login or register
</li>
</ul>
Use ng-bind-html directive to bind HTML to the model value. See link: http://www.w3schools.com/angular/ng_ng-bind-html.asp
You need to use ngSanitize module in your application. Include angular-santize.js file to do it.
I know you've already got your answer, but just to put this out there...
You can also do this using a very simple directive as like a child view, and avoid using $rootScope all together. This promotes reuse across applications, and follows angular's modular approach of breaking things down into small parts (in this case very small parts!).
welcomeMessage.js
app.directive('welcomeMessage', function() {
return {
restrict: "E",
templateUrl: "welcomeMessage.html"
};
});
welcomeMessage.html
<p>
You are not logged in, please
log in or
register
</p>
Sample Usage (in your index.html)
<welcome-message />
Sample Plunk
Is there a way to link to a form using only HTML/CSS? I am still a beginner in web dev and have not yet started on JavaScript or JQuery.
So what I want to do is,
<div>
<ul>
<a href="??" target="_parent">
<li class="toggle1">Guest</li>
</a>
<a href="??">
<li class="toggle2">Owner</li>
</a>
</ul>
</div>
...in the tags in the I want to link to a form which has elements like First name, Last name etc, such that when I click on "Guest" the form for the guest should appear and likewise for "Owner"
There is! Make the href tags to #guestform and #ownerform. Then, make each form's id attribute those values (guestform and ownerform). This looks like so:
<div>
<ul>
<a href="#guestform">
<li class="toggle1">Guest</li>
</a>
<a href="#ownerform">
<li class="toggle2">Owner</li>
</a>
</ul>
</div>
<form id="guestform">...</form>
<form id="ownerform">...</form>
Then, in the css, do the following:
form {
display:none;
}
form:target {
display:block;
}
Hope this helped you!
EDIT: As sdcr said, the a tag should be inside the li, and not the other way around for it to be semantically correct. It should be like this instead
<div>
<ul>
<li class="toggle1">
Guest
</li>
<li class="toggle2">
Owner
</li>
</ul>
</div>
I may have misinterpreted your answer based on the lack of information given.
If you don't care who the end user is, and make both forums accessable to them no matter if they're a guest or owner, you'd simply create another HTML document and link to that document (provided that your web server can serves "static" content).
For instance, say you created another file called owner_form.html and somewhere within the body, you had:
<form>
...
</form>
From your index.html you could link to owner_form.html via a <a> tag like this:
... Contents that will redirect you
(old answer)
No, this is not possible in only HTML and CSS. Not even (securely & validly) with JavaScript.
HTML and CSS don't have the ability to differentiate the client using the page on their own. And JavaScript can't securely do this either.
You should look into server-side programming. This is where the magic would happen for you. You can try many different frameworks / scripting languages that have web-server functionality to them, for instance, some of the popular ones are:
Ruby on Rails
PHP
NodeJS
Django
I have one angularjs application. In that application if we click button we are displaying some content which have tabs. By clicking each tab corresponding data will be fetch and need to display there. So data i am getting dynamically. But problem is in below example, i have HTMl tags in content(EX:- "address":"<b>NewYork</b>"). But when i click address tab, it is displaying like <b>NewYork</b>,instead i need NewYork Kindly suggest me
$scope.tabs = [
{ title:'id', content:data[0].id, active:true },
{ title:'name', content:data[0].name,active:false},
{ title:'address', content:$sce.trustAsHtml(data[0].address),active:false},
{ title:'pin', content:data[0].pin,active:false}
];
<ul class="nav nav-tabs">
<li ng-repeat="tab in tabs" ng-class="{active: tab.active}" >
{{tab.title}}
</li>
</ul>
<div class="tab-content">
<div class="tab-pane fade in" ng-repeat="tab in tabs" ng-class="{active: tab.active}" style="width:100%">
{{tab.content}}
</div>
</div>
You can solve this by using to_trusted filter
and add filter in your js side
angular.module("app", [])
.controller("ctrl", function ($scope) {
//some code
}).filter('to_trusted', ['$sce', function ($sce) {
return function(text) {
return $sce.trustAsHtml(text);
};
}]);
By default angular sanitizes your values to display any HTML tags as text, for obvious security reasons. If you want to include HTML from your objects in your templates, you can use the ng-bind-html="yourvalue" directive on your HTML elements, ie:
<span ng-bind-html="yourvalue"></span>
Or specifically for your case:
Keep in mind though that this isn't really a best practice in angular (tempting though it is, I've used it too often myself already). It all depends on your particular situation of course, but in general you might want to include this kind of markup in your template and/or include some property in your model with some significance and adjust your display based on that. For example, if city.isFavourite is true, you could conditionally add a favourite CSS class to it in your template.
To wrap it up, this page goes into some safety considerations when using HTML verbatim in your template: AngularJS API for $sanitize
Thank you so much guys. It is working fine now. I kept like below.
<div ng-bind-html="tab.content"></div>
I'm trying to do a simple thing with AngularJS and Bootstrap 3. I'm learning now and I tried to do this and I searched and I can't find any conclusion.
I have an HTML page with 3 different buttons. Each buttons redirect us to another page that is the same. I want to send to this page a different value depending on which button I used.
I read this thread Angular.js pass value from select to another view
But I'm not sure if this is the best way.
<ul class="list-inline">
<li ui-route="/signup/role1">
<button class="btn btn-default">FooText</button>
</li>
<li ui-route="/signup/role2">
<button class="btn btn-default">FooText</button>
</li>
<li ui-route="/signup/role3">
<button class="btn btn-default">FooText</button>
</li>
</ul>
Thank you to everybody
I think this is the recommanded way. Pass the value in param and extract param on another page.
Other way is to create const but i wont recommend you this if you need to do this process many time and i think its short of hack to use const for this process.