I've set a dx-form that has multiple dxi-item. when I change the value of isDisabled (bool) on the button click event, it disables all the buttons on my forms. What i'd like to do is on click of new Button it should only enable TextBox, and keep the click event for other buttons.
import {
Component,
OnInit
} from '#angular/core';
#Component({
selector: 'app-test',
templateUrl: './test.component.html',
})
export class TestComponent implements OnInit {
TESTMaster = {
Name: '',
CODE: 0,
};
IsDisable: boolean;
constructor() {
this.IsDisable = false;
}
BtnNewClick(e) {
this.IsDisable = true;
}
BtnSomeRandomClick(e) {
this.IsDisable = false;
}
ngOnInit(): void {}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div class="dx-card" style="margin: 100px;padding: 10px;">
{{!IsDisable}}
<dx-form id="form" [formData]="TESTMaster" labelLocation="left">
<dxi-item itemType="group" [disabled]='!IsDisable' caption="TEST">
<dxi-item dataField="Name" [editorOptions]="{elementAttr: { class: 'form-text' }}">
<dxo-label location="left" [showColon]='true' alignment="left"></dxo-label>
</dxi-item>
</dxi-item>
<dxi-item itemType="group" [colCount]='2'>
<dxi-item>
<dx-button type="default" text="NEW" icon="add" (onClick)="BtnNewClick($event)">
</dx-button>
</dxi-item>
<dxi-item>
<dx-button type="default" text="SOME RANDOM" icon="add" (onClick)="BtnSomeRandomClick($event)">
</dx-button>
</dxi-item>
</dxi-item>
</dx-form>
</div>
In the case of using dx-from just diable the item group with disable property, it will only disable dxi-item.
Related
I'm trying to get a reference to an element nested inside a modal. While using #ViewChild works for the modal, its not working for any nested elements. eg: the datePicker in the code below. Working demo here: https://stackblitz.com/edit/angular-s8dtmm-8gqgus (The 2nd console for datePicker is undefined)
export class AppComponent {
#ViewChild('content') modal: ElementRef;
#ViewChild('dp') datePicker: ElementRef;
constructor(private modalService: NgbModal) {}
open() {
this.modalService.open(this.modal);
console.log('modal', !!this.modal); // ref to #content
console.log('dp', this.datePicker); // undefined
}
}
Template:
<ng-template #content let-modal>
<input ngbDatepicker #dp="ngbDatepicker">
<button class="calendar" (click)="dp.toggle()">Date picker</button>
</ng-template>
<button(click)="open()">Open modal</button>
If you can modify your example so that the modal content is a separate component (i.e. based on this example rather than this one) then you should be able to access the datePicker component in the open() method. I have created a launch-modal.component which defines the "Open" button and logs out the value of dp when the modal is opened:
launch-modal.component.html
<button class="btn btn-outline-primary" (click)="open()">Open modal</button>
launch-modal.component.ts
import { Component, ElementRef } from '#angular/core';
import { NgbActiveModal, NgbModal } from '#ng-bootstrap/ng-bootstrap';
import { ModalComponent } from './modal.component';
#Component({
selector: 'launch-modal-component',
templateUrl: './launch-modal.component.html'
})
export class LaunchModalComponent {
constructor(private modalService: NgbModal) {}
open() {
const modalRef = this.modalService.open(ModalComponent);
console.log('dp', modalRef.componentInstance.datePicker);
}
}
I've then defined a modal.component.ts that defines the modal content (this is based on the app.module.html in your question, and defines a ViewChild for the datePicker):
modal.component.ts
import { Component, ElementRef, ViewChild } from '#angular/core';
import { NgbActiveModal } from '#ng-bootstrap/ng-bootstrap';
#Component({
selector: 'modal-component',
template: `
<button type="button" class="close" aria-label="Close" (click)="activeModal.dismiss('Cross click')">
<span aria-hidden="true">×</span>
</button>
<input ngbDatepicker #dp="ngbDatepicker">
<button class="btn btn-outline-primary calendar" (click)="dp.toggle()" type="button">Date picker</button>
`
})
export class ModalComponent {
#ViewChild('dp') datePicker: ElementRef;
constructor(public activeModal: NgbActiveModal) {}
}
The output of the console when the modal is opened is:
Please see this Stackblitz for a working demo.
I made a variable that has the style which I would want the input box to change to when it is clicked on.
How can I implement it so that when the input box is clicked, the border color of the input box changes to blue, considering that CSS, styles and everything else are imported?
const inputStyle = css
border-color: blue;
;
const InputBox = styled.input
myClick: function () {
inputstyle
}
;
render() {
return (
<InputBox
placeholder='Click Me'
type='text'
onClick={this.myClick}
/>
styled.foo doesn't return a class component, so writing methods as if they're on a class in the template string won't work.
Since you're handling something stateful (was this thing clicked?) you need to have some place to put that state. Then you can pass that state to the InputBox component:
const InputBox = styled.input`
border-color: ${({ clicked }) => clicked ? 'blue' : 'transparent'};
`
class Parent extends React.Component {
constructor (props) {
this.state = { clicked: false }
}
handleClick () {
this.setState({ clicked: true })
}
render () {
return (
<InputBox
placeholder="Click Me"
type="text"
clicked={this.state.clicked}
onClick={this.handleClick}
/>
)
}
}
I'd suggest checking out the "Passed Props" section of the styled-components docs.
you can do this :
const Styles = {
inputNormal:{color:'blue'},
inputClicked:{color:'red'}
}
class Parent extends React.Component {
constructor (props) {
this.state = { clicked: false }
}
handleClick () {
this.setState({ clicked: true })
}
render () {
return (
<InputBox
placeholder="Click Me"
type="text"
style={this.state.clicked?styles.inputNormal:styles.inputClicked}
onClick={this.handleClick}
/>
)}}
You should add styles with variables like this:
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
clicked: false
};
}
myClick = () => {
this.setState({
clicked: true
});
};
render() {
const inputStyle = {
borderColor: "blue"
};
return (
<input
placeholder="Click Me"
type="text"
onClick={this.myClick}
style={this.state.clicked ? inputStyle : null}
/>
);
}
}
Here is a working demo:
DEMO
I have an angular app that has authentication system. Inside the navmenu, I have login, logout and a text that displays username. It works just fine, however, when the user logged in, I still see the same navbar. login should be gone and logout along with username text should be there. But it's not. They are there only when user refreshes the page. I don't know what I'm missing.
Here is my navmenu.component.html
<li *ngIf="!currentUser"><a [routerLink]="['/login']"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
<li *ngIf="currentUser"><a (click)="logout()"><span class="glyphicon glyphicon-log-out"></span> Logout</a></li>
<li *ngIf="currentUser"><a><span class="glyphicon glyphicon-user"></span> {{ currentUser.firstName }} {{ currentUser.lastName }}</a></li>
And here is my navmenu.component.ts code:
import { Observable } from 'rxjs';
import { User } from './../../models/user';
import { Router } from '#angular/router';
import { AuthService } from './../../services/auth.service';
import { Component, OnInit } from '#angular/core';
#Component({
selector: 'nav-menu',
templateUrl: './navmenu.component.html',
styleUrls: ['./navmenu.component.css']
})
export class NavMenuComponent implements OnInit {
currentUser: User;
ngOnInit() {
this.currentUser = JSON.parse(localStorage.getItem('currentUser') || '');
}
constructor(private authService: AuthService, private router: Router) { }
logout() {
this.authService.logout();
this.router.navigate(['/home']);
}
}
Lastly, here is my app.component.html file looks like:
<nav-menu></nav-menu>
<router-outlet></router-outlet>
ngOnInit will be called only once, so I suggest to do the following:
auth.service.ts
// Your code here
authStateChanged: Subject<AuthState> = new Subject<AuthState>();
// Your code here
auth-state.enum.ts
export enum AuthState {
Authorized,
Unauthorized
}
component.ts
Leave everything as is, just change ngOnInit slightly.
ngOnInit() {
this.authService.authStateChanged.subscribe(
authState => { this.refreshCurrentUser(); }
)
}
refreshCurrentUser() {
this.currentUser = JSON.parse(localStorage.getItem('currentUser') || '');
}
You can add more login to check authState, this is just basic example that will work in your case.
Now inside your auth.service when you do logon, on success simply do:
this.authStateChange.next(AuthState.Authorized);
You can use a BehaviorSubject that checks if there is a user in localStorage and also emits changes in the status.
Service:
private user = new BehaviorSubject<any>(JSON.parse(localStorage.getItem('currentUser')))
public user$ = this.user.asObservable();
setUser(user) {
localStorage.setItem('currentUser', JSON.stringify(user))
this.user.next(true)
}
we call setUser() when the status changes. And every subscriber get's the status.
Login:
login() {
this.authService.setUser({user: 'Admin'});
}
and each component that you want to listen to, add this to constructor:
constructor(private authService: Service) {
authService.user$.subscribe(val => {
this.currentUser = JSON.parse(localStorage.getItem('currentUser'))
})
}
and then of course when you want to log out user, do...
logout() {
this.authService.setUser(null)
}
I'm new to nativescript. I'm navigation from Alert page to
Naviagation page. I have posted all relevant codes.please check it.
I'm not getting any issue.When performing image onClick I'm able to call this method onNotification().
I'm able to see this console log in command prompt
console.log("SteveCheck", "Test");
But I don't know, Why it is not moving to notification page when
click on the button in alert page.Below I have added all the relevant codes.
app.module.ts:
import { NgModule, NO_ERRORS_SCHEMA } from "#angular/core";
import { NativeScriptModule } from "nativescript-angular/nativescript.module";
import { AlertComponent } from "./AlertFolder/alert.component";
import { NativeScriptRouterModule } from "nativescript-angular/router"
import {AppRoutes, AppComponents } from "./app.routing";
#NgModule({
declarations: [AlertComponent, ...AppComponents],
bootstrap: [AlertComponent],
imports: [
NativeScriptModule,
NativeScriptRouterModule,
NativeScriptRouterModule.forRoot(AppRoutes)
],
schemas: [NO_ERRORS_SCHEMA],
})
export class AppModule {}
app.routing.ts:
import { AlertComponent } from "./AlertFolder/alert.component";
import { NotificationComponent } from "./Noficiation/notification";
export const AppRoutes:any = [
{ path: "", component: AlertComponent },
{ path: "NotificationPage", component: NotificationComponent}
];
export const AppComponents: any = [
AlertComponent,
NotificationComponent
];
alert.component.ts:
#Component({
selector: "sdk-child-component",
moduleId: module.id,
....
})
export class AlertComponent {
.....
.....
public constructor(private router: Router, private routerExtensions: RouterExtensions){
this.alertList = [];
}
onNotification() {
console.log("SteveCheck", "Test");
this.router.navigate(["NotificationPage"]);
}
}
alert.component.html:
<StackLayout class="borders" orientation="horizontal" >
<Label class="notification-label" text="Notification Center" ></Label>
<Image src="res://right_arrow" stretch="none" class="right-arrow" (tap)="onNotification()"></Image>
</StackLayout>
constructor(private routerExtensions: RouterExtensions) {
// ...
}
this.routerExtensions.navigate(["/NotificationPage"]);
I have to use Path folder name Notification. I have that second page NotificationComponent placed inside that Notification folder only.That's why I'm unable to navigate between pages.
By changing this :
this.router.navigate(["NotificationPage"]);
to this:
this.router.navigate(["Notification"]);
fixed my issue
Here is an example , we can include routerLink on the img tag-
<img src="../../../assets/images/Notification.png" [routerLink]="['/NotificationPage']" width="55%" height = "200px" class="img-responsive" style="margin-left: 220px">
I have a basewindow.component which will be the base component for all my components. This basewindow.component will be having buttons like save, delete etc and while clicking "New" button I would like to call basewindow function ufbNew() after executing it should execute parent window function ufNew(). Please check my code and help me whether I'm doing it correctly. I'm able to call base function but parent not
//basewindow.component///
import { Component } from '#angular/core';
#Component({
selector: 'basewindow',
templateUrl: './Basewindow.component.html',
styleUrls: ['./Basewindow.component.css']
})
export class BasewindowComponent {
/////////////////////// User Base Functions ///////////////////
ufbNew() {
this.ufNew();
}
ufbSave() {
this.ufSave();
}
/////////////////////// User Functions for parent ///////////////////
ufNew() {
alert("I m In Base ufbNew")
}
ufSave() {
}
}
//// Basewindow.component.html
<div class="container">
<h1>Hero Form</h1>
<form>
<div class="form-group">
<button (click)="ufbNew()">New</button>
<button (click)="ufbSave()">Save</button>
</div>
</form>
</div>
/////////////////////////// AccountsCategory.Component (Parent 1) ////
import { Component } from '#angular/core';
import { BasewindowComponent } from '../base/basewindow.component';
#Component({
selector: 'app',
templateUrl: './AccountsCategory.component.html'
})
export class AccountsCategory extends BasewindowComponent {
/////////////////////// User Functions for parent ///////////////////
ufNew() {
alert("I m in Acounts category (parent)")
}
ufSave() {
}
}
//////////// AccountsCategory.component.html /////////////
<basewindow> </basewindow>
my purpose is to reuse base component objects , functions and override from child if requires.
please see test application in plnkr
https://plnkr.co/edit/bVxt4GjNXwIg7pDbR4sE?p=preview
Use this
abstract class Animal {
//OTHER STUFF
abstract ufSave(): void;
//OTHER STUFF
}