I set according the Angular Doc the bodyClass in the following example:
<mat-tab-group animationDuration="0ms" [selectedIndex]="selectedIndex">
<mat-tab label="Documents">
<ng-template matTabContent>
<app-container1></app-container1>
</ng-template>
</mat-tab>
<mat-tab label="Documents2" [bodyClass]="'tab-item-meta'">
<app-ref-main1></app-ref-main1>
</mat-tab>
</mat-tab-group>
and have in the corresponding *.scss file:
.tab-item-meta {
height: 70vh;
}
When I open the Developer Console (either in FF or Chromium) I see that the class tab-item-meta is applied. But there the values of the scss file are not applied. When I try to add a code like
<div class="tab-item-meta">test</div>
then I see i.e. the class is applied. It seems like this extra attribute _ngcontent-mgf-c556 is missing for the mat-tab-body.
==> How to use the bodyClass properly?
Related
SOLVED
I Simply did not have the closing a tag at the end. Sheesh....
I need help. I'm still a student so still learning. Any help would be appreciated. I'm lost.
I'm using bootstrap5, adding a carousel ("With captions" https://getbootstrap.com/docs/5.1/components/carousel/ for the full code.) to a page and a link in that slide on the h5.
After adding the link, the text went from white to blue and gives me this
"Cannot GET /WilliamVest/%E2%80%9CKeyWestPhotoGallery.html"
I've checked this address NUMEROUS times. Even said it out loud to myself. The link IS in the same folder as the rest of the project.
So why won't it work?
I tried to google and found "data-bs-target" does that have anything to do with it? Like I said, still new so still learning.
****Someone pointed out I missed the quotes in the link. Did not fix it.
I added that quote. It was discolored so I don't know where that came from but I think it's because you were right about the quotation style.
I commented that whole line out and started over. I just wanted to see the difference.
So now, the blue is gone in the lettering but now it won't even open another page to show an error. It does nothing.
First slide label
Key West Photo Gallery -->
This is my code snippet ---- KeyWestPhotoGallery.html is the link I'm trying to get to.
<!-- Carousel of Projects -->
<div id="carouselExampleCaptions" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-indicators">
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1" aria-label="Slide 2"></button>
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="2" aria-label="Slide 3"></button>
</div>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="Images/palmLighthouse1.jpg" class="d-block w-100" alt="Key West Lighthouse">
<div class="carousel-caption d-none d-md-block">
<h5 class="display-2"><a href=“KeyWestPhotoGallery.html>Key West Photo Gallery</a></h5>
<!-- <p>Some representative placeholder content for the first slide.</p> -->
</div>
You have:
<a href=“KeyWestPhotoGallery.html>
That is not a quote " as used in HTML, that is a Unicode Left Double Quotation Mark a.k.a. opening typographer's quote (a display character with no special meaning). So it thinks that is part of the URL that is why it is urlencoded into that address as %E2%80%9C
let path = "/WilliamVest/%E2%80%9CKeyWestPhotoGallery.html"
console.log(decodeURI(path))
Solutions include the following:
Remove it: <a href=KeyWestPhotoGallery.html> (Unquoted attribute-value syntax)
Or, replace it adding the missing closing quote: <a href="KeyWestPhotoGallery.html"> (Double-quoted attribute-value syntax)
Or, use single quotes: <a href='KeyWestPhotoGallery.html'> (Single-quoted attribute-value syntax)
I have a /admin URI and inside this there are 3 sub tabs
<ngb-tabset class="col-lg-12" type="pills" class="customTab">
<ngb-tab id="tab-lsp3">
<ng-template ngbTabTitle>Model Tracker</ng-template>
<ng-template ngbTabContent>
<app-modeltracker></app-modeltracker>
</ng-template>
</ngb-tab>
<!-- **** MAIN TAB4 **** -->
<ngb-tab id="tab-lsp4">
<ng-template ngbTabTitle>Class Label</ng-template>
<ng-template ngbTabContent>
<app-classlabel></app-classlabel>
</ng-template>
</ngb-tab>
</ngb-tabset>
2 sub tab's contents are being pulled from different components and on switch between these 2 sub tabs, a password prompt page or pop up should appear and show the content of respective tabs only if the password is correct.\
How can this be achieved using Angular life cycle hooks?.
I use this navigation in my Angular 5/Angular Materials application:
<!-- Navigation -->
<mat-toolbar color="warn">
<mat-toolbar-row>
<span class="nav-icon">
My Icon
</span>
<span class="nav-spacer"></span>
<button mat-button [routerLink]="['/home']">Home</button>
<button mat-button [routerLink]="['/login']">Login</button>
<button mat-button (click)="logout()">Logout</button>
</mat-toolbar-row>
</mat-toolbar>
<!-- Router Outlet -->
<router-outlet></router-outlet>
Actually I could not find how to set the active menu button active. Is there a way of doing this, e.g. with Route?
In Angular 6 you can add the routerLinkActive attribute to buttons. When the corresponding route is the current one, the content of this attribute will be added to the element's css classes.
For example:
<button mat-button [routerLink]="['/home']" routerLinkActive="mat-accent">
Home
</button>
When this button is clicked and the corresponding route becomes the active one, it will get the additional mat-accent CSS class.
Reference: Angular.io docs, Angular API docs
Hopefully, this helps someone the active class was not working for me I'm using Angular version 12.0.5
I replaced:
<button mat-raised-button routerLink="/overview/anxietydepressionchart/{{id}}" routerLinkActive="activebutton">Anxiety Depression Graph</button>
With:
<a mat-raised-button routerLink="/overview/anxietydepressionchart/{{id}}" routerLinkActive="activebutton" >Anxiety Depression Graph</a>
CSS:
.activebutton
{
background-color: rgb(51, 51, 51);
color: white;
}
This solved my active button issues.
I want to create a theme for my angular 4 app using angular material 2.I created the initial part but it doesn't work. What have I done wrong in this code?
--Theme.scss
#import "~#angular/material/_theming";
#include mat-core();
$app-primary: mat-palette($mat-blue, 600);
$app-accent: mat-palette($mat-green, 600);
$app-warn: mat-palette($mat-red);
$app-theme: mat-light-theme($app-primary, $app-accent, $app-warn );
#include angular-material-theme($app-theme);
-- Component
<button color="primary" class="mat-raised-button">Pick Up</button>
<button color="accent" class="mat-raised-button">Drop Off</button>
-- angular-cli.json
"styles": [
"styles.css",
"theme.scss"
]
It's a simple fix. Like I said in the comment on your question, just remove the underscore. Easy.
You should also use the mat-raised-button attribute instead of the class (if you're using 2.0.0-beta.11 and above).
<button color="primary" mat-raised-button>Pick Up</button>
<button color="accent" mat-raised-button>Drop Off</button>
If you're using 2.0.0-beta.10 or below, use the md-raised-button attribute.
<button color="primary" md-raised-button>Pick Up</button>
<button color="accent" md-raised-button>Drop Off</button>
I'm trying to generate some jQuery Mobile elements with Javascript. After the javascript runs and places the generated elements in the myTest div, the styling and scripting are not attached as they are on the static content. Is there any way to have jQuery execute on the generated code?
Here's an example:
Markup:
<!-- Does not look correct when populated -->
<div id="myTest">
</div>
<!-- Looks correct -->
<div data-role="collapsible-set" data-theme="d" data-content-theme="d" data-mini="true" data-corners="false">
<div data-role="collapsible">
<h3>Test</h3>
</div>
</div>
Script:
$(document).ready(onloadFunc);
function onloadFunc() {
var parent = $('<div data-role="collapsible-set" data-theme="d" data-content-theme="d" data-mini="true" data-corners="false">');
var item = $("<h3>").html("test");
parent.append(item);
$("#myTest").append(parent);
}
Link to jsfiddle: http://jsfiddle.net/DcFhj/
First off your markup is actually slightly off, the collapsible-set widget is meant to contain within it several collapsible widgets.
For example (taken from the documentation)
<div data-role="collapsible-set">
<div data-role="collapsible" data-collapsed="false">
<h3>Section 1</h3>
<p>I'm the collapsible set content for section 1.</p>
</div>
<div data-role="collapsible">
<h3>Section 2</h3>
<p>I'm the collapsible set content for section 2.</p>
</div>
</div>
Have a look at the following question from the jQuery Mobile documentation. Basically in general in order to enhance markup that is dynamically inserted you have to either initialize the widget on the markup or you can trigger the create event on a parent element and jQuery Mobile should initialize all of the appropriate widgets.
In this case being that you just have one widget you just need to initialize the collasible widget (also interesting enough this works with your current markup)
$("#myTest").append(parent).find('div').collapsible();
http://jsfiddle.net/DcFhj/3/
If for example you had several widgets that needed enhancement (or just for simplicity) you could instead trigger the create method (this doesn't work with your current markup but if you correct it it should).
$("#myTest").append(parent).trigger('create');
http://jsfiddle.net/DcFhj/4/