I want to create a panel like above using angular 6 material design.
Use the below code
<mat-card>
<mat-card-header>
<div class="col-lg-12">
<div class="col-lg-9">
<h3>{{ pageTitle }}</h3>
</div>
<div class="col-lg-3">
<button mat-raised-button color="primary" [disabled]="!form.valid" (click)="form.ngSubmit.emit()">Save</button>
<button type="reset" mat-raised-button color="accent" (click)="cancelForm()">Cancel</button>
</div>
</div>
</mat-card-header>
<mat-progress-bar mode="indeterminate" *ngIf="progress"></mat-progress-bar>
<mat-divider></mat-divider>
<mat-card-content>
<mat-form-field>
<input matInput placeholder="Name [(ngModel)]="vehicleMakeViewModel.name" name="name" required #name="ngModel"></mat-form-field>
</mat-card-content>
</mat-card>
The above code produce the below template. The title and buttons are not properly align to the template.
I am not sure but it could be that you have not imported the styles for angular material (or that you have a different style, not the default one).
Try adding this to your styles.css
#import "~#angular/material/prebuilt-themes/indigo-pink.css";
info here
https://material.angular.io/guide/getting-started
also for info on themes:
https://material.angular.io/guide/theming
Related
This is my html template file:
<div class="container"
fxLayout="row wrap"
fxLayout.sm="column"
fxLayout.xs="column"
fxLayoutAlign.gt-md="space-around center"
fxLayoutGap="10px"
fxLayoutGap.xs="0">
<div fxFlex="100" dir="rtl">
<div>
<h3 *ngIf="">اطلاعات کاربر</h3>
<hr>
</div>
</div>
<div fxFlex="40" *ngIf="user" [#visibility]="visibility" [#expand]>
<mat-card>
<mat-card-header>
<mat-card-title>
<h3>{{user.firstname | uppercase}}</h3>
</mat-card-title>
</mat-card-header>
<img mat-card-image src="{{ baseURL + default_user.filename}}" >
<mat-card-content>
<p>{{user.lastname}}</p>
</mat-card-content>
</div>
<div fxFlex="40" *ngIf="user" [#visibility]="visibility" [#expand]>
<mat-list>
<h3>مشخصات</h3>
<mat-list-item >
<h4 matLine> {{user.firstname}} </h4>
<p matLine> {{user.lastname</p>
<!--
<p matLine>
<span> -- {{comment.author}} {{comment.date | date }} </span>
</p>
-->
</mat-list-item>
</mat-list>
</div>
<div [hidden]="user || errMess">
<mat-spinner></mat-spinner><h4>Loading . . . Please Wait</h4>
</div>
<div *ngIf="errMess">
<h2>Error</h2>
<h4>{{errMess}}</h4>
</div>
</div>
<!--
<form novalidate [formGroup]="commentForm" #cform="ngForm" (ngSubmit)="onSubmit()">
<p>
<mat-slider min="1" max="5" step="1" thumbLabel tickInterval="1" name="rating" formControlName="rating"></mat-slider>
<mat-form-field class="full-width">
<textarea matInput formControlName="comment" placeholder="Your Comment" rows=12></textarea>
<mat-error *ngIf="formErrors.comment">{{formErrors.comment}}</mat-error>
</mat-form-field>
</p>
<button type="submit" mat-button class="background-primary text-floral-white" [disabled]="commentForm.invalid">Submit</button>
</form>
-->
And this is the error I get:
ERROR in Errors parsing template: Unexpected closing tag "div". It may happen when the tag has already been closed by another tag. For more info see https://www.w3.org/TR/html5/syntax.html#closing-elements-that-have-implied-end-tags ("
</p>
</mat-card-content>
[ERROR ->]</div>
<div fxFlex="40" *ngIf="user" [#visibility]="visibility" [#expand]>
"): C:/Users/m/Desktop/SEP/version1-frontend/src/app/users/users.component.html#27:2, Unexpected closing tag "div". It may happen when the tag has already been closed by another tag. For more info see https://www.w3.org/TR/html5/syntax.html#closing-elements-that-have-implied-end-tags ("
<h4>{{errMess}}</h4>
</div>
[ERROR ->]</div>
<!--
"): C:/Users/m/Desktop/SEP/version1-frontend/src/app/users/users.component.html#52:0
What is the problem and why do I get this error message? I checked a couple of time each tags and it seems everything is ok and also i have no errors in my V code IDE but when I run the program by npm start I get the above error message! Please help me know what is the provlem and how can I solve it?
You need to close mat-card tag.
<div fxFlex="40" *ngIf="user" [#visibility]="visibility" [#expand]>
<mat-card>
<mat-card-header>
<mat-card-title>
<h3>{{user.firstname | uppercase}}</h3>
</mat-card-title>
</mat-card-header>
<img mat-card-image src="{{ baseURL + default_user.filename}}" >
<mat-card-content>
<p>{{user.lastname}}</p>
</mat-card-content>
</mat-card> //<--- **This one is missing**
</div>
Mat cat header is not closed in your code. Please check that again and try to run the project again using ng start --open
I have a checkbox inside a ng-template that is called by a ngbpopover. The checkbox is shown, but, I can't checked or unchecked the checkbox. But, it works when coded it in the stackblitz.
Stackblitz code -
https://stackblitz.com/edit/angular-4ueruh?file=src%2Fapp%2Fpopover-triggers.html
<div class="container sr-get-your-text">
<div class="row">
<div class="col-12">
<!-- Page title -->
<sr-title [value]="content.title"></sr-title>
<!-- Reading name and author -->
<div class="get-your-text-subtext" [innerHtml]="content.subText"></div>
<div class="sr-path-selection">
<button
*ngFor="let option of options; trackBy : trackEntryItems"
[attr.aria-label]="option.label"
[value]="option.name.toLowerCase()"
[innerText]="option.name"
[ngClass]="{'sr-path-selected': option.selected}"
[ngbPopover]="(option.name.toLowerCase() === 'anthology') && !showAgainCheck && popContent"
placement="top"
#popoverCheckbox="ngbPopover"
(click)="onPathSelect(option)"></button>
</div>
<!-- Recommendation -->
<div class="recommendation" [innerHtml]="content.recommendation"></div>
<button srPrimaryButton
*ngIf="isOptionSelected"
[isButtonBar]="true"
(click)="onContinue()">Continue
</button>
</div>
</div>
</div>
<ng-template #popContent>
<form [formGroup]="showAgainForm" #frm="ngForm">
<div class="form-check" (mouseleave)="onHoverOutside()">
<input
id="showAgain"
formControlName="showAgainCheckBox"
class="form-check-input"
type="checkbox"
[checked]="showAgainCheck"
(click)="onChanged(frm)">
<label for="showAgain" class="form-check-label">Show Again</label>
</div>
</form>
</ng-template>
expected to be able to check the checkbox.
Result is it's not accessible.
I am using this Stackblitz example to dynamically create forms in mat-stepper.
I have 3 steppers Personal Details, Address and Contact.
However, when I open the Address form and then switch to contact I want the address form to disappear.
Below is my code. Can someone help me to point out my mistake?
Code for Mat-stepper in HTML
<mat-step label="Personal Details" state="chat">
<div class="col-sm-offset-10">
<button mat-icon-button color="primary" matTooltip="Create New Form" (click)="addPersonalDetails()">
<mat-icon aria-label="Example icon-button with a heart icon">add_circle_outline</mat-icon>
</button>
</div>
<div>
<hr />
<button mat-button matStepperPrevious>Back</button>
<button mat-button matStepperNext>Next</button>
</div>
</mat-step>
<mat-step label="Address" state="chat">
<div class="col-sm-offset-10">
<button mat-icon-button color="primary" matTooltip="Create New AddressForm" (click)="addAddress()">
<mat-icon aria-label="Example icon-button with a heart icon">add_circle_outline</mat-icon>
</button>
</div>
<div>
<hr />
<button mat-button matStepperPrevious>Back</button>
<button mat-button matStepperNext>Next</button>
</div>
</mat-step>
<mat-step label="Contact" state="chat">
<div class="col-sm-offset-10">
<button mat-icon-button color="primary" matTooltip="Create New Contact Form" (click)="addContact()">
<mat-icon aria-label="Example icon-button with a heart icon">add_circle_outline</mat-icon>
</button>
</div>
<div>
<hr />
<button mat-button matStepperPrevious>Back</button>
<button mat-button matStepperNext>Next</button>
</div>
</mat-step>
Typescript Code
addPersonalDetails() {
this.service.setRootViewContainerRef(this.viewContainerRef);
this.service.addDynamicPersonalComponent();
}
addAddress() {
this.service.setRootViewContainerRef(this.viewContainerRef);
this.service.addDynamicAddressComponent();
}
addContact() {
this.service.setRootViewContainerRef(this.viewContainerRef);
this.service.addDynamicContactComponent();
}
The Typescript code calls the address, Personal Details, and other components.
Now if I click on add form button for address and then switch to contact stepper I want to hide the address form and display the contact form.
Currently, the address from stays there and the contact form is displayed below it.
Currently this is how the page looks in my app
If I change tabs I should be able to hide and show forms seperately for each stepper option.
I am using the PrimeNG dialog component and I have a modal dialog from which, on the click of a button, I want to show another modal dialog.
What is happening is that my second modal dialog is not really modal, because I only see the content of the dialog following the button.
I do change [appendTo] attribute of the p-dialog for the second modal dialog but it does not seem to work properly.
How can I open nested dialog in a p-dialog?
Dialog in a angular 2 component:
<p-dialog header="Create/Edit Financial Flow" [visible]="display$ | async" modal="modal" width="500" height="600" responsive="true" [resizable]="false" [closable]="false">
<financial-flowdialog #myfinancialflowdialog (onCloseDialog) ="closeDialog()" [flowdata]="selectedFlows$ | async"></financial-flowdialog>
</p-dialog>
When clicking a button within the first modal dialog, should open a second dialog. Below the definition of the nested dialog:
<p-dialog header="Title" [(visible)]="display" [appendTo]="body" *ngIf="display" modal="modal" width="500" height="600" responsive="true"
[resizable]="false" [closable]="false">
<div class="container-fluid">
<form (ngSubmit)="onSubmit()">
<div class="pull-right top-buffer ">
<button type="button" class="btn btn-primary" (click)="closeDialog()">Cancel</button>
<button type="submit" class="btn btn-primary">Select</button>
</div>
</form>
</div>
</p-dialog>
<button type="button" #mybtn [value]="value" ngDefaultControl [formControlName]="key" [id]="key" [ngStyle]="style" (click)="openDialog()">{{label}}</button>
I can open the first dialog but when I click on the button to open the second dialog, the content of dialog shows up like a normal div. Below the html rendered:
<section>
<div id="nestediag" ng-reflect-form="[object Object]" class="ng-pristine ng-invalid ng-touched">
<!--template bindings={
"ng-reflect-ng-if": "true"
}--><p-dialog header="Title" height="600" modal="modal" responsive="true" width="500" ng-reflect-visible="true">
<div class="container-fluid">
<form class="ng-untouched ng-pristine ng-valid">
<div class="pull-right top-buffer ">
<button class="btn btn-primary" type="button">Cancel</button>
<button class="btn btn-primary" type="submit">Select</button>
</div>
</form>
</div>
</p-dialog>
<button ngdefaultcontrol="" type="button" value="Select a payee" ng-reflect-name="flowpayee" ng-reflect-ng-style="[object Object]" ng-reflect-value="Select a payee" ng-reflect-id="flowpayee" id="flowpayee" class="ng-pristine ng-valid ng-touched" style="width: 100%;">Select a payee</button>
</div>
</section>
You can solve this problem by appending the second dialog to the document body by using the appendTo attribute, e.g.
<p-dialog appendTo="body">
...
</p-dialog>
Defining a componentref variable and using [appendTo]="Componentref" solve the issue.
See discussion https://github.com/primefaces/primeng/issues/656
You can solve this problem by appending the second dialog to the document body by using the appendTo attribute, for e.g.
<p-dialog appendTo="body">
.............
</p-dialog>
I am new to Ionic Framework, so I am experimenting with it now. On one of my page, I have a search input followed by a list, which looks like this:
When I scroll up, the search field is scrolling up with the list view. Is it possible to keep the search field fixed at the top whilst scrolling?
This is my HTML markup so far:
<ion-view view-title="Force">
<ion-content>
<label class="item item-input">
<i class="icon ion-search placeholder-icon"></i>
<input type="text" placeholder="Search Force" data-ng-model="searchForce">
</label>
<div class="list">
<ion-item class="item-icon-right" ng-repeat="force in forces | filter:searchForce" type="item-text-wrap" href="#/tab/force/{{force.id}}">
{{force.name}}
<i class="icon ion-chevron-right icon-accessory"></i>
</ion-item>
</div>
</ion-content>
</ion-view>
You can use a sub-header for this:
<ion-header-bar class="bar-light bar-subheader">
<input type="text" placeholder="Search Force" data-ng-model="searchForce">
<button ng-if="searchForce.length"
class="button button-icon ion-android-close input-button"
ng-click="clearSearch()">
</button>
</ion-header-bar>
Codepen demo
Also see this post for some alternatives: http://forum.ionicframework.com/t/how-to-make-search-bar-sticky/20721