We Keep Coding

How to show a bootstrap modal via an Angular-Service

I have a global Errorhandler in which I process Client- and Server-Errors.
To provide a feedback for the user I want to open a modal which returns the error-message.
Therefore I've implemented a modal:
import {Component} from '#angular/core';
import {BsModalRef, BsModalService} from 'ngx-bootstrap';
import {Button} from '../../layout-models/button.model';
#Component({
selector: 'error-modal',
templateUrl: './error-modal.component.html',
styleUrls: ['./error-modal.component.scss']
})
export class ErrorModalComponent {
title: string;
buttonTitle = 'OK';
type: 'error';
button: Button;
protected modalRef: BsModalRef;
constructor(protected modalService: BsModalService) {}
public show(title: string, message: string) {
this.title = title;
this.modalRef = this.modalService.show(
message,
Object.assign({}, { class: `modal-banner ${this.type}`})
);
}
hide() {
if (this.modalRef) {
this.modalRef.hide();
}
}
}
In my Notification-Service:
import {Injectable, NgZone} from '#angular/core';
import { ErrorModalComponent } from '../error-modal.component';
#Injectable({
providedIn: 'root'
})
export class NotificationService {
public errorModalComponent: ErrorModalComponent;
showError(title: string, message: string): void {
this.errorModalComponent.show(title, message);
}
}
Which leads to
Uncaught TypeError: Cannot read property 'show' of undefined
I feel like I am doing some fundamental mistake - the main purpose of this is to have a centralized modal. Is this possible or do I need to use the ModalComponent in every Component in which I want to show the error-handling-modal?

I wouldn't use ngx-modal I would use NgbModal
What yazantahhan means is something like this:
import {Injectable} from "#angular/core";
import {NgbModal, NgbModalRef} from "#ng-bootstrap/ng-bootstrap";
#Injectable()
export class ErrorModalService {
title: string;
buttonTitle = "OK";
type: "error";
protected modalRef: NgbModalRef;
constructor(protected modalService: NgbModal) {}
public show(title: string, message: string) {
this.title = title;
this.modalRef = this.modalService.open(
message
);
}
hide() {
if (this.modalRef) {
this.modalRef.close();
}
}
}
Then inject and use it like this:
import { Component } from "#angular/core";
import {ErrorModalService} from "./ErrorModalService";
#Component({
selector: "app-root",
templateUrl: "./app.component.html",
styleUrls: ["./app.component.scss"]
})
export class AppComponent {
title = "testAngular";
constructor(
private errorModalService: ErrorModalService,
) {}
showError() {
this.errorModalService.show("title", "message");
}
}
Don't forget to provide the service in your module
import { BrowserModule } from "#angular/platform-browser";
import { NgModule } from "#angular/core";
import { AppRoutingModule } from "./app-routing.module";
import { AppComponent } from "./app.component";
import {ErrorModalService} from "./ErrorModalService";
import {BsModalService} from "ngx-bootstrap/modal";
import {NgbModule} from "#ng-bootstrap/ng-bootstrap";
#NgModule({
declarations: [
AppComponent,
],
imports: [
BrowserModule,
AppRoutingModule,
NgbModule,
],
providers: [
ErrorModalService,
],
bootstrap: [AppComponent],
})
export class AppModule { }

Angular: pass JSON data to child component

I have a paragraph and app component, and a JSON file:
app component:
//app.component.ts
import { Component, OnInit } from '#angular/core';
import * as data from 'JsonDataSample1.json'
#Component({
selector: 'app-root',
template: `<app-paragraph [value]='json.caseFileID'></app-paragraph>`,
})
export class AppComponent{
json = data
title = 'af-bifurcated';
}
paragraph component:
//paragraph.component.ts
import { Component, Input } from '#angular/core';
#Component({
selector: 'app-paragraph',
template: `{{ value }}`,
styleUrls: ['./paragraph.component.css']
})
export class ParagraphComponent {
#Input() value: string;
}
JSON:
{
"caseFileID": "1234567",
"pdaSubmitterEntity": "Submitter 1",
"propertyDataCollectorName": "Data Collector 1",
"propertyDataCollectorType": "APPRAISER",
"stateCredentialID": "007",
"licenseState": "CA",
"licenseExpiration": "09\/18\/2019"
}
When I try to pass the imported JSON object to the child component, nothing displays. But if instead of importing the JSON, I copy it and hardcode the value of json as equal to whatever I copy from the file, the code works. What am I doing wrong here? Why can't I pass the imported JSON?
UPDATE
I have found that in order to get the JSON file properly imported I had to add the following to my tsconfig.json:
"compilerOptions": {
"allowSyntheticDefaultImports": true,
"resolveJsonModule": true,
...
}

To achieve expected result, use correct path jsondatasample1.json file
import * as data from './JsonDataSample1.json'
Sample working code for reference- https://stackblitz.com/edit/angular-f1hxf9?file=src/app/app.component.ts

I have found that in order to get the JSON file properly imported I had to add the following to my tsconfig.json:
"compilerOptions": {
"allowSyntheticDefaultImports": true,
"resolveJsonModule": true,
...
}

Uncaught Error: Can't resolve all parameters for LoginComponent: (?) in Angular 7 and webpack

I am working in angular 7. I am getting an error while compiling. I have checked the circular dependancy, Injectable() decorator. There is no unused dependancy. I have used #Injectable() in my service. For your information, i am using mac. I can't find any solution.
My code is given bellow:
auth.service.ts
import { Router } from '#angular/router';
import { Injectable } from '#angular/core';
import { Observable } from 'rxjs';
import { HttpErrorResponse } from '#angular/common/http';
import { HttpService } from '../common/modules/http-with-injector/http.service';
import { UserData } from '../common/modules/auth/auth.module';
import { dcrypt } from '../common/_classes/functions';
#Injectable()
export class AuthService {
user: any;
constructor(
private router: Router,
private http: HttpService,
) {}
}
component.ts
import { Component, ElementRef, OnInit, ViewChild } from '#angular/core';
import { AuthService } from '../auth.service';
import * as $ from 'jquery';
import { Router } from '#angular/router';
import { ScriptLoaderService } from 'src/app/common/script-loader.service';
import { AlertService } from 'src/app/common/modules/alert/alert.service';
import { Helpers } from 'src/app/common/helpers';
#Component({
selector: 'app-login',
templateUrl: './login.component.html',
styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {
model: any = {
email: '',
password: ''
};
loading = false;
#ViewChild('hasAlert', { static: true }) alertContainer: ElementRef;
constructor(
private _script: ScriptLoaderService,
private router: Router,
private alert: AlertService,
private authService: AuthService,
) {
this.getSettings();
}
}
Please help me to solve the problem.

This error may cause of Metadata issue:
TypeScript includes experimental support for emitting certain types of
metadata for declarations that have decorators.
To enable this experimental support, you must set the emitDecoratorMetadata compiler option either on the command line or in your tsconfig.json:
Command Line:
tsc --target ES5 --experimentalDecorators --emitDecoratorMetadata
tsconfig.json:
{
"compilerOptions": {
"target": "ES5",
"experimentalDecorators": true,
"emitDecoratorMetadata": true
}
}
For more information you may see this:
https://www.typescriptlang.org/docs/handbook/decorators.html

Did you added AuthService in NgModule?
#NgModule({
declarations: [
],
imports: [
],
providers: [
AuthService //Your service
]
})
As mentioned by Richards, you can inject service using below code as well.
#Injectable({ providedIn: 'root' })

Wraping components in angular

I need to wrap a mat-slide-toggle component on my own, I wrote:
mytoggle.component.ts
import { Component, OnInit, Input, forwardRef, ViewChild, ElementRef } from '#angular/core';
import {MatSlideToggle, MatSlideToggleChange} from '#angular/material/slide-toggle';
import { NG_VALUE_ACCESSOR } from '#angular/forms';
#Component({
selector: 'ng7-common-ng7-slide',
templateUrl: 'ng7-slide.component.html',
styles: [],
providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => Ng7SlideComponent),
multi: true
}
]
})
export class Ng7SlideComponent extends MatSlideToggle {
}
And mytoggle.component.html:
<mat-slide-toggle
[checked]="checked"
[disabled]="disabled">
{{label}}
</mat-slide-toggle>
and in my app I'm using like this:
app.component.html
<form class="example-form" [formGroup]="formGroup" (ngSubmit)="onFormSubmit(formGroup.value)" ngNativeValidate>
<!-- THIS WORKS <mat-slide-toggle formControlName="slideToggle">Enable Wifi</mat-slide-toggle> -->
<ng7-common-ng7-slide formControlName="slideToggle" label="test me!">
</ng7-common-ng7-slide>
<button mat-rasied-button type="submit">Save Settings</button>
</form>
app.component.ts
import { Component } from '#angular/core';
import { FormGroup, FormControl, FormBuilder } from '#angular/forms';
import { MatSlideToggleChange } from '#angular/material/slide-toggle';
#Component({
selector: 'home-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
formGroup: FormGroup;
constructor(formBuilder: FormBuilder) {
this.formGroup = formBuilder.group({
slideToggle: false
});
}
onFormSubmit(formValue: any) {
alert(JSON.stringify(formValue, null, 2));
}
}
So the formValue on onFormSubmit method always alerts "slideToggle":false no matter is it is checked or not, when I use mat-slide-toggle it alerts true or false according with the toggle state correctly.
Are there anything else to do? I just need to extend the component and all event.

After some research I got something that works well..
I imported an abstract class that implements the basic value acessors methods:
https://stackoverflow.com/a/45480791/2161180
import { ControlValueAccessor } from '#angular/forms';
export abstract class AbstractValueAccessor implements ControlValueAccessor {
innerValue: any = '';
get value(): any { return this.innerValue; }
set value(v: any) {
if (v !== this.innerValue) {
this.innerValue = v;
this.onChange(v);
}
}
writeValue(value: any) {
this.innerValue = value;
this.onChange(value);
}
onChange = (_) => {};
onTouched = () => {};
registerOnChange(fn: (_: any) => void): void { this.onChange = fn; }
registerOnTouched(fn: () => void): void { this.onTouched = fn; }
}
Then I created my component extending it:
import { NG_VALUE_ACCESSOR } from '#angular/forms';
import { Component, Input, forwardRef } from '#angular/core';
import { AbstractValueAccessor } from '../abstract.component';
#Component({
selector: 'my-switch',
templateUrl: './my-switch.component.html',
styleUrls: ['./my-switch.component.css'],
providers: [
{
provide: NG_VALUE_ACCESSOR,
multi: true,
useExisting: forwardRef(() => MySwitchComponent)
}
]
})
export class MySwitchComponent extends AbstractValueAccessor {
#Input() label: string;
#Input() checked: boolean;
#Input() disabled: boolean;
}
html:
<mat-slide-toggle
[(ngModel)]="value"
[checked]="checked"
[disabled]="disabled">
{{label}}
</mat-slide-toggle>
module:
import { FormsModule } from '#angular/forms';
import { MatSlideToggleModule } from '#angular/material';
import { NgModule } from '#angular/core';
import { CommonModule } from '#angular/common';
import { MySwitchComponent } from './my-switch.component';
#NgModule({
declarations: [MySwitchComponent],
imports: [
CommonModule,
MatSlideToggleModule,
FormsModule
],
exports: [
MySwitchComponent
]
})
export class MySwitchModule { }
And to use it:
<form [formGroup]="fb">
<my-switch formControlName="inputSwitch" label="Toggle-me!"></my-switch>
<strong> Value: </strong> {{inputSwitch}}
</form>
or
<my-switch [(ngModel)]="inputSwitchNgModel" label="Toggle-me!"></my-switch>
<strong> Value: </strong> {{inputSwitchNgModel}}

How to include dataTable to angular 2 application?

I have a simple application in angular 2. I want to display data in a paginated table. I found this example very nice and I would like to use in my app.
Thehtml of the example is in home.component.html,
The css of the example is in script in index.html like:
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/select/1.2.2/css/select.dataTables.min.css">
I want to know where I should put the java script code for this to work. I have tried to put in index.html and home.compose.html, but none on this worked correctly.
Please tell me where the java script code should go.
Thank.
This is the javascript:
$(document).ready(function() {
$('#example').DataTable( {
columnDefs: [ {
orderable: false,
className: 'select-checkbox',
targets: 0
} ],
select: {
style: 'os',
selector: 'td:first-child'
},
order: [[ 1, 'asc' ]]
} );
} );

If you already took reference of Jquery in your Html page than no need to import it in component.ts file. See the below code it is working fine for me.
import { Component, OnInit, ViewChild } from '#angular/core';
import { FormBuilder, FormGroup, Validators } from '#angular/forms';
import { ModalComponent } from 'ng2-bs3-modal/ng2-bs3-modal';
import { Observable } from 'rxjs/Rx';
import { Global } from '../shared/global';
declare var $ : any;
#Component({
templateUrl: 'app/Component/assignfeatureview.component.html'
})
export class AssignFeatureViewComponent {
constructor() {
}
ngOnInit() {
$(document).ready(function () {
$('#tblAssignFeature').DataTable();
});
}
}

Try to use Angular compatible version of that, if still want to use them, if it's used in one Component, then just put the piece of code in ngOnInt in your component, also use import to import the code in your component, something like this:
import {Component} from "#angular/core";
import {$} from "jquery";
//also import the datatables plugin for jQuery
#Component({
selector: "app",
templateUrl: "app.html",
styleUrls: ["jquery.dataTables.min.css", "select.dataTables.min.css"]
});
export class LoginComponent {
constructor() {
}
ngOnInit() {
$('#example').DataTable( {
columnDefs: [ {
orderable: false,
className: 'select-checkbox',
targets: 0
} ],
select: {
style: 'os',
selector: 'td:first-child'
},
order: [[ 1, 'asc' ]]
});
}
}

import {Component} from "#angular/core"; import {$} from "jquery";
//also import the datatables plugin for jQuery
#Component({ selector: "app", templateUrl: "app.html",
styleUrls: ["jquery.dataTables.min.css",
"select.dataTables.min.css"] }); export class LoginComponent {
constructor() { }
ngOnInit() {
$('#example').DataTable( {
columnDefs: [ {
orderable: false,
className: 'select-checkbox',
targets: 0
} ],
select: {
style: 'os',
selector: 'td:first-child'
},
order: [[ 1, 'asc' ]] }); }
}