I am using mat-chips from material.angular.io
<mat-chip-list class="categories">
<mat-chip><a href="/publication/category/{{category.id}}">
{{category.name}}</a></mat-chip>
</mat-chip-list>
If I click with the center button of the mouse the link works and opens another tab, but I can not open the link with left click.
I tried with class="link-overlapping", but still does not working.
You don't need the anchor at all you can just use routerLink directly on mat-chip:
<mat-chip-list class="categories">
<mat-chip [routerLink]="['publication/category', category.id]">
{{category.name}}
</mat-chip>
</mat-chip-list>
Did you try with routerLink? it works for me.
<mat-chip-list class="categories">
<mat-chip><a [routerLink]="['/your_path']">{{ data }} </a></mat-chip>
</mat-chip-list>
</div>
I suggest this way
<mat-chip><a routerLink="/test" class="mat-standard-chip" style="margin:0; padding:0;">My link</a></mat-chip>
So that link is displayed at the bottom left of the screen when mouse is hovering.
Related
Right now I'm working on an Angular project and in this project there's a page with 2 mat-autocomplete components, one for selecting country and the other for selecting state. The state one works fine with everything staying at expected places, as shown here:
And inspecting elements shows properties that make sense. For div with class name cdk-overlay-pane (highlighted in pic) the width is 350px and top as well as left will change dynamically to make it always display right above or under the associated input element.
And here's the related HTML code:
<div class="p-10" fxFlex.gt-md="100" fxFlex.gt-xs="100" fxFlex="100" [hidden]="!showStateDropdown">
<div class="spec-form-field drop-down" matAutocompleteOrigin #stateOrigin="matAutocompleteOrigin">
<mat-form-field>
<input type="text" #stateInput [formControl]="form.controls['state']" placeholder="{{ 'account_section.state' | translate }}" matInput [matAutocomplete]="state" (keyup)="isSelectedState = false; _filterSearch('state');" (blur)="removeUnusableValue();" (focus)="_filterSearch('state');"
[matAutocompleteConnectedTo]="stateOrigin">
<i class="material-icons">arrow_drop_down</i>
</mat-form-field>
<mat-autocomplete #state="matAutocomplete" (optionSelected)="isSelectedState = true;" (blur)="updateAccountData()">
<mat-option *ngFor="let state of states" [value]="state.iso">
{{ state.name }}
</mat-option>
</mat-autocomplete>
</div>
</div>
However, things get weird when it comes to the mat-autocomplete for country.
The dropdown for this one will always appear on the top left corner of the window (browser).
And when I'm inspecting elements, width, top and left properties of cdk-overlay-pane are always set to 0px.
However, I'm unable to find actual differences between the one for country and the one for state, except that everything that says "state" is replaced with "country" in the one for country. Here's the HTML code:
<div class="p-10" fxFlex.gt-md="100" fxFlex.gt-xs="100" fxFlex="100">
<div class="spec-form-field drop-down" matAutocompleteOrigin #countryOrigin="matAutocompleteOrigin">
<mat-form-field>
<input type="text" #countryInput [formControl]="form.controls['country']" placeholder="{{ 'account_section.country' | translate }}" matInput [matAutocomplete]="country" (keyup)="checkKeycode($event.keyCode,'country');" (blur)="removeUnusableValue();" (focus)="_filterSearch('country');"
[matAutocompleteConnectedTo]="countryOrigin">
<i class="material-icons">arrow_drop_down</i>
</mat-form-field>
<mat-autocomplete #country="matAutocomplete" (optionSelected)="changeCountry()" (blur)="updateAccountData()">
<mat-option *ngFor="let country of countries" [value]="country.iso">
{{ country.name }}
</mat-option>
</mat-autocomplete>
</div>
</div>
I honestly have no idea why the country one is not working properly. Everything seems fine but the end result is not.
Here's version numbers of components and modules being used in this project in case anyone wants to take a look.
Any help is appreciated.
Right after completing the post I just double checked the HTML file and found a different component with the same #countryInput at the bottom of the HTML file. Looks like whoever modified that file forgot to differentiate it from the original one. I'll just leave this question as a reference.
Problem Statement
I am trying to get the input from an <input> tag and display it as chips in the GUI, but the console gives me the error: "TypeError: this._chipList.registerInput is not a function".
Code
<mat-form-field>
<h3 class="sizeHeading">Add a size</h3>
<input matInput [matChipInputFor]="sizes" (matChipInputTokenEnd)="addSize($event)" <= Crash happens here
[(ngModel)]="data.size" class="sizeInput"><br><br>
</mat-form-field>
.... <!-- More code here but it is not part of the problem and what I am trying to show -->
<!-- Sizes display as chips -->
<div *ngIf="!displayOptions">
<mat-chip-list>
<mat-chip #sizes *ngFor="let size of sizes" [removable]="removable"
(removed)="removeSize(size)">
{{size}}
<mat-icon matChipRemove *ngIf="removable">cancel</mat-icon>
</mat-chip>
</mat-chip-list>
</div>
Explanation of Code
In the top block of HTML code, I am trying to get user input and display it as chips in the GUI, and that is done in the bottom block of HTML code.
As you can see, and I think this is the problem but I am not sure, is that the [matChipInputFor]="sizes" in the input tag is supposed to point to the #sizes element in the bottom block of code to show where to output the input. And indeed, the line where the program crashes is the line of code where I specify [matChipInputFor]="sizes" in the input tag.
What I've tried
I have Googled and it seems that this error is not showing up in the results or anywhere on Stackover Flow.
I have tried placing the top block of code within the div tag with the *ngIf condition but to no avail. I did this because I thought that maybe this is a problem with the scope of the #sizes element.
Actual Results
The program crashes with the error, "TypeError: this._chipList.registerInput is not a function" and I cannot take the input and display it as chips.
Expected Results
I want to take the input and display it as chips in Angular Material.
There are two problems with your code.
The #sizes reference attribute is conflicting with your sizes array. You could name it #sizeList, for example.
The [matChipInputFor] reference has to point to the chip list (mat-chip-list), not the chips themselves. So you should move the #sizeList to your mat-chip-list element.
So it should look something like this:
<mat-form-field>
<input matInput [matChipInputFor]="sizeList" (matChipInputTokenEnd)="addSize($event)" [(ngModel)]="data.size" class="sizeInput"><br><br>
</mat-form-field>
<div *ngIf="!displayOptions">
<mat-chip-list #sizeList>
<mat-chip *ngFor="let size of sizes" [removable]="removable" (removed)="removeSize(size)">
{{size}}
<mat-icon matChipRemove *ngIf="removable">cancel</mat-icon>
</mat-chip>
</mat-chip-list>
</div>
We have a search bar and drop down box in the page. When we click on search bar, the drop down getting invoked. Anybody knows how to stop this.
<div>
<ion-searchbar [(ngModel)]="searchTerm" (ionInput)="setFilteredData()"></ion-searchbar>
</div>
<br/>
<div>
<ion-select [(ngModel)]="selectedCityTag" placeholder="Filter" multiple="true" (ionChange)="onSelectChange()">
<ion-option selected *ngFor="let city of cityList">{{city}}</ion-option>
</ion-select>
</div>
when we click on search text box, the drop down getting invoked. Don't know how to fix.
Thanks
AK
Although, it is not mentioned in documentation but it is required to put ion-select inside ion-item, so doing same will solve your problem.
Wrap your ion-select with ion-item instead of div.
Also, please note that putting selected attribute for dynamically generated ion-option will select all the options for ion-select. You may want to put some condition, there.
<div>
<ion-searchbar [(ngModel)]="searchTerm" (ionInput)="setFilteredData()"></ion-searchbar>
</div>
<br/>
<ion-item>
<ion-select [(ngModel)]="selectedCityTag" placeholder="Filter" multiple="true" (ionChange)="onSelectChange()">
<ion-option selected *ngFor="let city of cityList">{{city}}</ion-option>
</ion-select>
</ion-item>
The html generated by the ion-select results in a child of type button.
I set width & height equal to 0, like
.item-cover {
height: 0;
width: 0;
}
so I have requirement to have two tabs and a button , i am new to primeng and have created the tabs component, which works fine, see code below, but i am not able to create a button in the same row.
<p-tabView class="info-audit-tabview">
<div class="ui-tabview-panels">
<p-tabPanel header="UnSelected List">
</p-tabPanel>
<p-tabPanel header="Selected List" ng-reflect-header="Audit Trail">
</p-tabPanel>
</div>
</p-tabView>
Using bootstrap classes, add col-md-4 or col-md-6 for tabs. Then place button
<p-tabView class="info-audit-tabview col-md-4">
<div class="ui-tabview-panels">
<p-tabPanel header="UnSelected List">
</p-tabPanel>
<p-tabPanel header="Selected List" ng-reflect-header="Audit Trail">
</p-tabPanel>
</div>
</p-tabView>
<button type="button" pButton label="Export"></button>
As you can see in the documentation on the tabView page, the TabPanel have a specific headerStyleClass that you use like this
<p-tabPanel header="Header 1" headerStyleClass="myCustomClass"></p-tabPanel>
What you can do is give it a class of your own, and style it. Basically, you're creating a tab that looks like a button.
If it's not what you want, please tell me so that I can find another solution for you.
I have a dropdown menu for languages in my website and it works fine in Google Chrome, Safari and Internet Explorer, but it is bugged in Firefox.
This is the code:
<a href="">
<select id="languageSelector" style="background-color: transparent" onchange="location = this.options[this.selectedIndex].value;">
<option value=".">ESPAÑOL</option>
<option value="./en/index.html">ENGLISH</option>
<option value="./de/index.html">DEUTSCH</option>
<option value="./fr/index.html">FRANÇAIS</option>
<option value="./nl/index.html">NEDERLANDS</option>
</select>
</a>
It also has a rare behaviour. If I move throught the select with my keyboard and I press Enter, it works, but clicking with the mouse is not working.
I'm using Firefox 38.0.5.
Any help would be appreciated.
Why is your code surrounded by an a-Tag () ?
If you click on the content (e.g. your dropdown) the href="" reload the page.
Remove the a or change href="" to href="#".
For me, changing href="" to href="#" was not enough. The href attribute must be eliminated altogether and just
< a >
will be enough to:
make the DDL work correctly in FF 38.0.5
retain CSS classes linked
to "a" in the stylesheet