
Security News
vlt Launches "reproduce": A New Tool Challenging the Limits of Package Provenance
vlt's new "reproduce" tool verifies npm packages against their source code, outperforming traditional provenance adoption in the JavaScript ecosystem.
angular-kladr
Advanced tools
Angular 4+ package for better experience using kladr api service
$ npm install angular-kladr --save
import { KladrModule } from 'angular-kladr';
Add imported module to the imports section in NgModule decorator.
@NgModule({
.
.
.
imports: [
:
KladrModule.forRoot({
isSecure: true
});
]
})
There is an option isSecure for confguring whether to send secure requests (under https protocol) or not.
You can skip adding options. By default, there is an insecure connection configured.
NOTE: forRoot method is required
import { Component } from '@angular/core';
import { KladrService } from 'angular-kladr';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
constructor(
private kladr$: KladrService
){ }
}
Basically, you need to create collection of type Observable<KladrResponse>.
public cities: Observable<KladrResponse>;
NOTE: KladrResponse type should also be imported from the package
Then create FormControl, which you will get value from in order to pass it into kladr api request.
Assign the request to the collection in the contructor body as shown below:
constructor(private kladr$: KladrService) {
this.cityControl = new FormControl('');
this.cities = this.cityControl.valueChanges
.pipe(
takeUntil(this.ngUnsubscribe),
debounceTime(100),
switchMap(value => {
const context: KladrSearchContext = {
...this.regionContext,
query: value
};
return this.kladr$.api(context);
})
);
}
private ngUnsubscribe = new Subject<void>();
private regionContext: KladrSearchContext = {
limit: 10,
contentType: KladrContentType.region
};
public cities: Observable<KladrResponse>;
public cityControl: FormControl;
public chosenCity: KladrItem;
chooseCity(city: KladrItem) {
this.chosenCity = city;
this.cityControl.setValue(city.name);
}
<div>
<label for="city">Choose city</label>
<input type="text" id="city" name="city" [formControl]="cityControl">
<ul>
<li *ngFor="let city of (cities | async)?.result">
<a href="javascript:void(0)" (click)="chooseCity(city)">{{city.name}}</a>
</li>
</ul>
<div>
<pre>{{chosenCity | json}}</pre>
</div>
</div>
Combining all together:
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { KladrModule } from 'angular-kladr';
import { ReactiveFormsModule } from '@angular/forms';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
KladrModule,
ReactiveFormsModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
import { Component } from '@angular/core';
import { KladrService, KladrResponse, KladrSearchContext, KladrContentType, KladrItem } from 'angular-kladr';
import { Observable, Subject } from 'rxjs';
import { takeUntil, debounceTime, switchMap } from 'rxjs/operators';
import { FormControl } from '@angular/forms';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
constructor(private kladr$: KladrService) {
this.cityControl = new FormControl('');
this.cities = this.cityControl.valueChanges
.pipe(
takeUntil(this.ngUnsubscribe),
debounceTime(100),
switchMap(value => {
const context: KladrSearchContext = {
...this.regionContext,
query: value
};
return this.kladr$.api(context);
})
);
}
private ngUnsubscribe = new Subject<void>();
private regionContext: KladrSearchContext = {
limit: 10,
contentType: KladrContentType.region
};
public cities: Observable<KladrResponse>;
public cityControl: FormControl;
public chosenCity: KladrItem;
chooseCity(city: KladrItem) {
this.chosenCity = city;
this.cityControl.setValue(city.name);
}
}
<div>
<label for="city">Choose city</label>
<input type="text" id="city" name="city" [formControl]="cityControl">
<ul>
<li *ngFor="let city of (cities | async)?.result">
<a href="javascript:void(0)" (click)="chooseCity(city)">{{city.name}}</a>
</li>
</ul>
<div>
<pre>{{chosenCity | json}}</pre>
</div>
</div>
The demo will be available soon.
0.1.2 (2019-04-21)
<a name="0.1.1"></a>
FAQs
Angular 4+ package for better experience using kladr api service
The npm package angular-kladr receives a total of 4 weekly downloads. As such, angular-kladr popularity was classified as not popular.
We found that angular-kladr demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
vlt's new "reproduce" tool verifies npm packages against their source code, outperforming traditional provenance adoption in the JavaScript ecosystem.
Research
Security News
Socket researchers uncovered a malicious PyPI package exploiting Deezer’s API to enable coordinated music piracy through API abuse and C2 server control.
Research
The Socket Research Team discovered a malicious npm package, '@ton-wallet/create', stealing cryptocurrency wallet keys from developers and users in the TON ecosystem.