Category «Angular»

Example for get value from ngNoForm and combine a search in Angular

ngNoForm: Create New Extractee: All {{e.name}} Status: All Open Finalised .ts index(): let f = document.getElementById(‘search_form’); if (f) { if (f.status.value != ” && f.laravel_id.value != ”) { params = params.set(‘search’, ‘status:’ + f.status.value + ‘;laravel_id:’ + f.laravel_id.value) .set(‘searchFields’, ‘status:=;laravel_id:=’) .set(‘searchJoin’, ‘and’); } else if (f.laravel_id.value != ”) { params = params.set(‘search’, f.laravel_id.value) .set(‘searchFields’, ‘laravel_id:=’); …

How to select all/trigger/unselect checkbox in Angular without use FormArray and ngModel

.html: …… {{item.site.name}} .ts: export interface NewXxxModel extends XxxModel { checkbox_value?: boolean; } …. not_assigned_tasks: NewXxxModel[]; new_tasks_ary: Array = []; …. triggerAll(tasks: string, event: any) { if (tasks == ‘not_assigned_tasks’) { this.new_tasks_ary = []; for (var i = 0; i < this.not_assigned_tasks.length; i++) { if (event && event.target.checked == false) { this.not_assigned_tasks[i].checkbox_value = false; } ...

How to upload multiple files via Angular and reset file input

<!– upload files –> <divclass=”input-group mb-3″ *ngIf=”declaration_status==’Open'”> <divclass=”input-group-prepend”> <spanclass=”input-group-text”id=”basic-addon1″>Upload Attachments</span> </div> <input class=”form-control” #chooseFileInput (change)=”fileChange($event)” type=”file”name=”file” multiple placeholder=”Upload files”accept=”.png,.gif,.jpeg,.pdf,.txt,.csv,.doc,.zip,.gz,.rar”id=”choose_file”> <span *ngIf=”uploading” class=”input-group-text”><i class=”fa fa-spinner fa-spin mr-3 ml-2″aria-hidden=”true”></i> Uploading …</span> </div> ts: fileChange(event: any) { let formData = new FormData(); let fileList: FileList = event.target.files; for (let i = 0; i < fileList.length; i++) { formData.append(‘files[]’, …

How to add select form element in Angular html component file?

.ts: all_lines = [ {id: 1, name: “Line 1”}, {id: 2, name: “Line 2”}, {id: 3, name: “Line 3”}, {id: 4, name: “4”}, {id: 5, name: “5”}, {id: 6, name: “6”}, {id: 7, name: “7”}, {id: 8, name: “8”}, {id: 9, name: “9”}, ]; .html: <select formControlName=”lines” class=”form-control”> <option *ngFor=”let line of all_lines” [ngValue]=”line.id”>{{line.name}}</option> </select>

How to run a onclick javascript function when use Angular ngNoForm

<form target=”_blank”id=”pdf_form”action=”/backend/pdf” ngNoForm method=”post” class=”pdf-request”> ….. <button type=”submit”class=”btn btn-info btn-sm mr-2 ” (click)=”printPdfNow(‘Yes’)”><i class=”fa fa-print mr-1 ml-2″ aria-hidden=”true”></i>Print Now</button> <input type=”hidden”name=”print_now”value=”No” /> …. </form> js function in Angular xxx.ts: printPdfNow(print_or_not: string) { let f = <HTMLFormElement>document.getElementById(‘pdf_form’); console.log(f.print_now.value); if (print_or_not == ‘Yes’) { if (confirm(‘Are your sure to print the harvest slip(s) automatically?’)) { f.print_now.value = …

How to pass value in Angular form using PUT method for update laravel api?

Laravel PUT method usually used for update, but can’t get data/value from upload file. How to pass value in Angular form using PUT method for update laravel api? html form: <form class=”w-75″ [formGroup]=”main_form” (ngSubmit)=”onSubmit()” enctype=”multipart/form-data”> <div class=”form-row”> <input class=”form-control-file” (change)=”fileChange($event)” type=”file” name=”avatar_file” formControlName=”avatar_file” placeholder=”Upload file”accept=”.png,.jpg,.jpeg,.gif” id=”avatar_file”> .ts: avatar_file: new FormControl(undefined),  //use undefined to avoid console …

How to set web user session login and csrf token after passport oauth api login in Angular

When post a passport oauth api login in Angular, set login api use web routes middleware. web.php: Route::post(‘/api/v1/login’, ‘API\[email protected]’); instead of use api.php: Route::post(‘login’, ‘[email protected]’); This will set a laravel_session in cookie, and you will only need use Angular http post request login once, no need to login from web form again. You can directly …

How to get id parameter or route parts from Angular route path or url

ngOnInit() { //let last_route_part: string = this.route.snapshot.url[this.route.snapshot.url.length – 1].toString(); //console.log(‘url=’ + url + ‘, last_route_part=’ + last_route_part); this.route.url.subscribe((url_parts: UrlSegment[]) => { //console.log(‘url_parts=’ + url_parts + ” last_route_part=” + url_parts[url_parts.length – 1].toString()); this.last_route_part = url_parts[url_parts.length – 1].toString(); //console.log(‘last_route_part1=’ + this.last_route_part); }); this.route.params.subscribe((params: Params) => { this.edit_record_id = Number(params[‘id’]); }); //console.log(‘last_route_part2=’ + this.last_route_part); if (this.last_route_part == ‘create’) …