I need to get all the tags that have the class containtText back to me and I can find that tag value more than 300 characters and use continue for value . . .
But when I use this code:
<div class=" col-md-12 col-xl-12 col-sm-12 col-xl-12 col-lg-12 p-0">
<div class="row m-auto topbar col-md-12 col-xl-12 col-sm-12 col-xl-12 col-lg-12 p-3 mb-3">
<span (click)="close()">
<i class="fas fa-times"></i>
</span>
</div>
<div class=" mian-content form-inline content col-md-12 col-xl-12 col-sm-12 col-xl-12 col-lg-12 pt-2 pb-3">
<div *ngFor="let item of globalModel;let i=index"
class="form-group justify-content-start col-md-12 col-xl-12 col-sm-12 col-xl-12 col-lg-12 pt-2">
<div class="col-md-2 col-xl-2 col-lg-2 col-sm-12 col-lg-2">
<label><strong>{{item.name | translate }} :</strong></label>
</div>
<div *ngIf="!item.isDate && !item.isBoolean && !item.isImage" class="showMore col-md-9 col-xl-9 col-lg-9 col-sm-12 col-lg-9 containtText">
<label class="lbl">
<span class="spanArea">
{{item.value}}
<span class="">
<button mat-button (click)="FindLenghtString(item.value,i)" color="accent">Accent</button>
</span>
</span>
</label>
</div>
<div *ngIf="item.isBoolean" class=" col-md-9 col-xl-9 col-lg-9 col-sm-12 col-lg-9 containtText">
<label class="lbl" *ngIf="item.value && !item.isDate">
<span> <i class="fa fa-check-circle ic-green"></i></span>
</label>
<label class="lbl" *ngIf="!item.value && !item.isDate">
<span> <i class="fa fa-ban ic-red"></i> </span>
</label>
</div>
<div *ngIf="item.isImage" class=" col-md-9 col-xl-9 col-lg-9 col-sm-12 col-lg-9 containtText">
<label class="lbl" *ngIf="item.value && !item.isDate">
<span (click)="openDialog(item.value)" class="show-img-box">
<i class="fa fa-search"></i>
{{'POST.PREVIEW' | translate}}
</span>
</label>
</div>
<div *ngIf="item.isDate" class=" col-md-9 col-xl-9 col-lg-9 col-sm-12 col-lg-9 containtText">
<label class="lbl"
*ngIf="item.isDate && lang=='fa'"><span>{{item.value | date: 'dd/MM/yyyy hh:mm'}}</span></label>
<label class="lbl" *ngIf="item.isDate && lang!='fa'"><span>{{ item.value | jalali }}</span> </label>
</div>
</div>
</div>
ts :
Elipses(): void {
console.log(document.getElementsByClassName('containtText'));
}
it show me :
HTMLCollection []
and that value :
but when i need to get Value of 2 it show me the undefined
console.log(document.getElementsByClassName('containtText')['2']);
how can i get value 2 and change that ?????
Can you try to call the function Elipses() after the view is created?
I suggested the following in a comment
ngOnInit(){
setTimeout(()=>this.Elipses());
}
However, I understand that you made it work by putting it inside AfterViewInit instead.
First, I would not use jQuery or plain JavaScript when I have Angular :D
Second, ['2'] this is an index, so why '2'? :D
A simple solution in Angular:
Page:
<div>
{{text}}
</div>
<button (click)="showText()>{{buttonName}}</button>
Component:
text = string;
fullText = "Really long text";
buttonName = "Show more";
ngOnInit(){
text = fullText.substring(0, 5);
}
showText(){
if(text.length === 5){
text = fullText;
buttonName= "Show less";
} else {
text = fullText.substring(0, 5);
buttonName = "Show more";
}
}
Related
I'm using Jquery selector.
I have two addDDetails.
When we click on addDDetails, system will highlight pink on second addDDetails ( which I remark [ I want select This!!! ])
I noticed that I click on first addDDetails, system highlight pink wrongly at first addDetails.
How can I click on first addDDetails, system highlight pink on second addDDetails?
Thanks.
$(".addDDetails").click(function () {
$(this).closest(".Details > div").find(".addDDetails").css("background", "pink")
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div class="row Details" style="border-style:solid;">
<div class="col-lg-6 col-md-6 col-xs-12 col-sm-12 textfield">
<div class="row">
<div class="col-lg-1 col-md-1 col-xs-1 col-sm-1 textfield">
<span class="icon icon--plus addDDetails">+</span>
</div>
<div class="col-lg-11 col-md-11 col-xs-11 col-sm-11 textfield">
</div>
</div>
</div>
<div class="col-lg-6 col-md-6 col-xs-12 col-sm-12 textfield">
<div class="row">
<div class="col-lg-1 col-md-1 col-xs-1 col-sm-1 textfield">
<span class="icon icon--plus addDDetails">+ [ I want select This!!! ]</span>
</div>
<div class="col-lg-11 col-md-11 col-xs-11 col-sm-11 textfield">
</div>
</div>
</div>
</div>
You can use eq() to find the specified index element and bind the corresponding event handler.
Or you can use .index() in class selector to judge the current element index and make corresponding logic.
If the elements are siblings, you could do this:
var index = $(this).index();
If not, you can pass a selector of the set in which to look for the element.
var index = $(this).index('your selector');
e. g.
const _selector = '.addDDetails';
const _cssName = 'background-color';
$(_selector).click(function() {
const index = $(this).index(_selector);
$(_selector).css(_cssName, 'red');
if (index == 0) {
$(this).eq(index).css(_cssName, '');
} else {
$(_selector).css(_cssName, '');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div class="row Details" style="border-style:solid;">
<div class="col-lg-6 col-md-6 col-xs-12 col-sm-12 textfield">
<div class="row">
<div class="col-lg-1 col-md-1 col-xs-1 col-sm-1 textfield">
<span class="icon icon--plus addDDetails">+</span>
</div>
<div class="col-lg-11 col-md-11 col-xs-11 col-sm-11 textfield">
</div>
</div>
</div>
<div class="col-lg-6 col-md-6 col-xs-12 col-sm-12 textfield">
<div class="row">
<div class="col-lg-1 col-md-1 col-xs-1 col-sm-1 textfield">
<span class="icon icon--plus addDDetails">+ [ I want select This!!! ]</span>
</div>
<div class="col-lg-11 col-md-11 col-xs-11 col-sm-11 textfield">
</div>
</div>
</div>
</div>
Here the answer use
.children('div').eq(1)
$(".addDDetails").click(function () {
$(this).closest(".Details").children('div').eq(1).find('.addDDetails').length == 1).css("background", "pink");
});
Thanks.
Just like google search has two buttons at the bottom of the typeahead dropdown, How can I add some html to ngxTypeahead dropdown?
<div class="row">
<div class="col-sm-12">
<div class="flex-grow-1 form-group business-classification">
<div class="input-group">
<div class="input-group-prepend form-control pl-0 pt-0 reorder-1 flex-grow-1 position-relative ">
<!-- <span class="m-0 pt-4"><i class="material-icons md-18">search</i></span> -->
<span class="label position-absolute">Business Classification<sup class="text-danger">*</sup></span>
<input type="search" [value]="query" ngxTypeahead class="col-sm-12 form-control p-0 m-0 pl-3 no-brad border-0 bg-transparent pt-2" [taUrl]="url" [taApi]="api" [taItemTpl]="itemTpl" (taSelected)="handleHttpResultSelected($event)">
</div>
</div>
<ng-template #itemTpl let-result>
<div>{{ result.result.classification }}</div>
<div class="ml-auto small text-secondary pl-5">SIC {{ result.result.sicCode }}</div>
</ng-template>
</div>
</div>
</div>
You can use custom template for results and add the buttons you need at the end
something like this:
<ng-template #rt let-r="result" let-t="term">
<ngb-highlight [result]="r.name" [term]="t"></ngb-highlight>
<button>Save</button>
<button>Cancel</button>
</ng-template>
<label for="typeahead-template">Search for a state:</label>
<input id="typeahead-template" type="text" class="form-control" [(ngModel)]="model" [ngbTypeahead]="search" [resultTemplate]="rt"
[inputFormatter]="formatter" />
<hr>
Reference: https://ng-bootstrap.github.io/#/components/typeahead/examples#template
I am trying to make the data that this function generates appear in my CSV file. However, when it creates the CSV file there is no data and it's a blank csv document. Any suggestions?
const fs = require('fs');
const csv = await page.$$eval('.product_desc_txt', function(products){
// Iterate over product descriptions
let csvLines = products.map(function(product){
// Inside of each product find product SKU and its price
let productId = product.querySelector("div.product_desc_txt > div.body-copy.custom-body-copy").innerText.trim();
let productPrice = product.querySelector("span[data-wishlist-linkfee]").innerText.trim();
// Format them as a csv line
return `${productId};${productPrice}`;
});
// Join all lines into one file
return csvLines.join("\n");
});
fs.writeFileSync("test.csv", csv);
});
This is the code from the source, it basically repeats itself over and over with different item numbers and prices. I just need the item number and price. looped over.
<div class="list-tbl">
<div class="row" data-body-header>
<div class="col-xs-12">
<div class="split-line split-line-header-gap">
<div class="row">
<div class="col-xl-1 col-lg-1 col-md-1 col-sm-1 col-xs-2 body-copy">
<div class="style-check">
<input type="checkbox" id = "selectall" name="selectall" value="279114616" class="selectall">
<label for="selectall">
<span>All</span>
</label>
</div>
</div>
<div class="col-xl-1 col-lg-1 col-md-2 col-sm-3 col-xs-4 body-copy"></div>
<div class="col-xl-3 col-lg-3 col-md-3 col-sm-4 col-xs-6 body-copy">
<span class="hidden visible-lg visible-xl">Item</span>
</div>
<div class="col-xl-2 col-lg-2 text-right body-copy hidden visible-xl">
Price
</div>
<div class="col-xl-1 body-copy hidden visible-xl"></div>
<div class="col-xl-1 col-lg-1 col-md-2 body-copy hidden visible-xl visible-lg">
Quantity
</div>
<div class="col-xl-3 col-lg-4 col-md-4 body-copy hidden visible-xl visible-lg visible-md"></div>
</div>
</div>
</div>
</div>
<input type="hidden" id="isBDAppVar" value="BD" />
<input type="hidden" class="orderItem-2000423036" value="237459854"/>
<div class="row item-row" id = "2000423036" data-body-row>
<div class="col-xs-12">
<div class="split-line split-line-gap">
<div class="row">
<div class="col-xl-1 col-lg-1 col-md-1 col-sm-1 col-xs-2">
<div class="style-check marg_chk">
<input type="checkbox" class="checkbox" name="select" id ="select_0" value="0">
<label for="select_0">
<span class="hide">
Select
Item
</span>
</label>
</div>
</div>
<div class="col-xl-1 col-lg-1 col-md-2 col-sm-3 col-xs-4">
<div class="product-img-holder">
<img class="img-responsive prod-image-coming-soon" title="Pringles Snack Pack Potato Crisps, Original, 0.67 oz, 60 ct"
src="https://images.costcobusinessdelivery.com/ImageDelivery/imageService?profileId=12028466&imageId=1055688__1&recipeName=350"
onerror="this.onerror='';this.src='/wcsstore/CostcoGLOBALSAS/images/prod-image-coming-soon.svg';this.alt='Product Image Coming Soon'"
alt="Shoping List Product Image" />
</div>
</div>
<!-- price + linkfee based on region -->
<div class="col-xl-3 col-lg-3 col-md-6 col-sm-8 col-xs-6">
<div class="product_desc_txt">
<a href=" https://www.costcobusinessdelivery.com/.product.1055688.html " class="body-copy-link">
Pringles Snack Pack Potato Crisps, Original, 0.67 oz, 60 ct
</a>
<div class="body-copy custom-body-copy">
Item 1055688
</div>
<div class="margin_tp_10"></div>
<div class="body-copy hidden visible-md visible-sm visible-xs visible-lg">
<span data-wishlist-linkfee="false" > $15.89</span>
</div>
</div>
</div>
<div class="col-xl-2 col-lg-2 body-copy text-right hidden visible-xl ">
<span data-wishlist-linkfee="false" > $15.89</span>
</div>
I am working with Bootstrap 4 and jQuery. Currently I have a form with two (or more) BS Cards in it. Each Card contains fields for Customer Data, that should be added.
I have integrated a custom-validation, but currently I'm stucked. I not only want the colors to display the valid and the invalid fields. I also want to have a little Icon in the header of the Card, that contains an invalid form field.
In my CodePen Sample you can see the Icon already showing up. But as mentioned, this should only be the case, if there is a mistake (invalid field) in that card.
<i class="fa fa-exclamation-circle text-danger mr-1" aria-hidden="true"></i>
$(document).ready(function () {
window.addEventListener('load', function () {
// Fetch all the forms we want to apply custom Bootstrap validation styles to
var forms = document.getElementsByClassName('custom-validation');
// Loop over them and prevent submission
var validation = Array.prototype.filter.call(forms, function (form) {
form.addEventListener('submit', function (event) {
if (form.checkValidity() === false) {
event.preventDefault();
event.stopPropagation();
}
form.classList.add('was-validated');
}, false);
});
}, false);
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/css/bootstrap.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>
<script src="https://use.fontawesome.com/ee71fca9e3.js"></script>
<form id="testForm" action="#" method="post" class="custom-validation" novalidate>
<div class="row p-3">
<!-- Card 1 -->
<div class="col-6 mb-2">
<div class="card pax-details">
<div class="card-header card-header-primary d-flex justify-content-between">
<span>Customer 1</span>
<span>
<i class="fa fa-exclamation-circle text-danger mr-1" aria-hidden="true"></i>
<i class="fa fa-user" aria-hidden="true"></i>
</span>
</div>
<div class="card-body card-body-secondary collapse show">
<div class="form-group form-row">
<label for="" class="col-5 col-md-4 col-lg-3 col-xl-2">First Name*</label>
<div class="col-3 col-md-3 col-lg-2">
<input type="text" class="form-control form-control-sm" id="" placeholder="First name" required />
</div>
</div>
<div class="form-group form-row">
<label for="" class="col-5 col-md-4 col-lg-3 col-xl-2">Last Name*</label>
<div class="col-3 col-md-3 col-lg-2">
<input type="text" class="form-control form-control-sm" id="" placeholder="Last name" required />
</div>
</div>
</div>
</div>
</div>
<!-- Card 2 -->
<div class="col-6 mb-2">
<div class="card pax-details">
<div class="card-header card-header-primary d-flex justify-content-between">
<span>Customer 2</span>
<span>
<i class="fa fa-exclamation-circle text-danger mr-1" aria-hidden="true"></i>
<i class="fa fa-user" aria-hidden="true"></i>
</span>
</div>
<div class="card-body card-body-secondary collapse show">
<div class="form-group form-row">
<label for="" class="col-5 col-md-4 col-lg-3 col-xl-2">First Name*</label>
<div class="col-3 col-md-3 col-lg-2">
<input type="text" class="form-control form-control-sm" id="" placeholder="First name" required />
</div>
</div>
<div class="form-group form-row">
<label for="" class="col-5 col-md-4 col-lg-3 col-xl-2">Last Name*</label>
<div class="col-3 col-md-3 col-lg-2">
<input type="text" class="form-control form-control-sm" id="" placeholder="Last name" required />
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row px-3">
<div class="col">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</div>
</form>
How can this be solved? Do I need an extra form for each and every Card here?
CodePen: https://codepen.io/SchweizerSchoggi/pen/OzevKy
Observations
I've added a class hide.
I've added id for each card.
With those IDs I'm finding the error element and removing the class hide.
I've put the event.preventDefault just for example to avoid an error sending that form.
$(document).ready(function() {
window.addEventListener('load', function() {
// Fetch all the forms we want to apply custom Bootstrap validation styles to
var forms = document.getElementsByClassName('custom-validation');
// Loop over them and prevent submission
var validation = Array.prototype.filter.call(forms, function(form) {
form.addEventListener('submit', function(event) {
event.preventDefault(); // Rebemeber to remove this
event.stopPropagation(); // Rebemeber to remove this
if (!form.checkValidity()) {
event.preventDefault();
event.stopPropagation();
if ($('#card_body_1').find('.form-control:invalid').size() > 0) {
$('#card_body_1').parent().children('.card-header').find('.fa-exclamation-circle').removeClass('hide');
} else {
$('#card_body_1').parent().children('.card-header').find('.fa-exclamation-circle').addClass('hide');
}
if ($('#card_body_2').find('.form-control:invalid').size() > 0) {
$('#card_body_2').parent().children('.card-header').find('.fa-exclamation-circle').removeClass('hide');
} else {
$('#card_body_2').parent().children('.card-header').find('.fa-exclamation-circle').addClass('hide');
}
}
form.classList.add('was-validated');
}, false);
});
}, false);
});
.hide {
display: none !important;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/css/bootstrap.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>
<script src="https://use.fontawesome.com/ee71fca9e3.js"></script>
<form id="testForm" action="#" method="post" class="custom-validation" novalidate>
<div class="row p-3">
<!-- Card 1 -->
<div class="col-6 mb-2">
<div class="card pax-details">
<div class="card-header card-header-primary d-flex justify-content-between">
<span>Customer 1</span>
<span>
<i class="hide fa fa-exclamation-circle text-danger mr-1" aria-hidden="true"></i>
<i class="fa fa-user" aria-hidden="true"></i>
</span>
</div>
<div id='card_body_1' class="card-body card-body-secondary collapse show">
<div class="form-group form-row">
<label for="" class="col-5 col-md-4 col-lg-3 col-xl-2">First Name*</label>
<div class="col-3 col-md-3 col-lg-2">
<input type="text" class="form-control form-control-sm" id="" placeholder="First name" required />
</div>
</div>
<div class="form-group form-row">
<label for="" class="col-5 col-md-4 col-lg-3 col-xl-2">Last Name*</label>
<div class="col-3 col-md-3 col-lg-2">
<input type="text" class="form-control form-control-sm" id="" placeholder="Last name" required />
</div>
</div>
</div>
</div>
</div>
<!-- Card 2 -->
<div class="col-6 mb-2">
<div class="card pax-details">
<div class="card-header card-header-primary d-flex justify-content-between">
<span>Customer 2</span>
<span>
<i class="hide fa fa-exclamation-circle text-danger mr-1" aria-hidden="true"></i>
<i class="fa fa-user" aria-hidden="true"></i>
</span>
</div>
<div id='card_body_2' class="card-body card-body-secondary collapse show">
<div class="form-group form-row">
<label for="" class="col-5 col-md-4 col-lg-3 col-xl-2">First Name*</label>
<div class="col-3 col-md-3 col-lg-2">
<input type="text" class="form-control form-control-sm" id="" placeholder="First name" required />
</div>
</div>
<div class="form-group form-row">
<label for="" class="col-5 col-md-4 col-lg-3 col-xl-2">Last Name*</label>
<div class="col-3 col-md-3 col-lg-2">
<input type="text" class="form-control form-control-sm" id="" placeholder="Last name" required />
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row px-3">
<div class="col">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</div>
</form>
I need help on this IE error which I think relates on binding issue on my HTML page.
I'm using IE 11 and Angular 2. It has no error on Chrome and Firefox but I got an error
on this with IE 11 only. I can't trace where the exact error is located on my page but I know it's on my HTML page somewhere because of this part of the error.
at View_EdataReportingComponent0.prototype.detectChangesInternal (Function code:2933:5)
Here's the screenshot from the console in IE which shows the error.
And here's my HTML page...
<div class="main-header row px-0">
<div class="upload-bar" *ngIf="(uploader.progress || 0) > 0 || isUploadFinished">
<span class="caption-left">
<i class="fa fa-upload" aria-hidden="true"></i> Uploading files <b>({{(uploader.progress || 0)}}%)</b>
</span>
<span class="caption-right file-list">
<i class="mlcons_filled_close" (click)="abortUploadingFiles($event)" aria-hidden="true"></i>
Cancel
</span>
<div class="upload-progress" [ngStyle]="{ 'width': (uploader.progress || 0) + '%' }"> </div>
</div>
<div class="container-fluid">
<div class="main-body container">
<h2 class="pull-left">eData Reporting</h2> <!-- <hermes-toast></hermes-toast> -->
</div>
<form (ngSubmit)="onSubmit(modalForm.value, $event)" [formGroup]="modalForm" name="eDataReportForm" #eDataReportForm="ngForm">
<div class="form-group col-md-6 col-lg-6 px-0-left data-form">
<div class="form-group col-md-12 col-lg-12">
<div class="col-md-4 px-0 form-label">
<label for="reportingFrequency" class="label-Names- label-inline">Reporting Frequency:</label>
</div>
<div class="col-md-8 px-0">
<div *ngIf="modalMode == modalModes.EditMode">
<select id="report-frequency" class="form-control" formControlName="reportingFrequency" (change)="setReportingFrequency()" tabindex="0">
<option value="null">Please Select</option>
<option *ngFor="let reportingFrequency of reportingFrequencies" [value]="reportingFrequency.FieldValueKey">{{reportingFrequency.DisplayName}}</option>
</select>
</div>
<div id="report-freq-viewmode" *ngIf="modalMode == modalModes.ViewMode" class="view-mode" >
{{originaleDataReport?.reportingFrequencyName && originaleDataReport.reportingFrequencyName()}}
</div>
</div>
</div>
<div class="form-group col-md-12 col-lg-12" *ngIf="(this.originaleDataReport.reportingFrequencyName && this.originaleDataReport.reportingFrequencyName())=='Yes - Other' || freqReport=='Yes - Other' ">
<div class="col-md-4 px-0 form-label">
<label for="other" class="label-Names- label-inline" [class.required-field]="modalMode != modalModes.ViewMode">Other:</label>
</div>
<div class="col-md-8 px-0">
<div *ngIf="modalMode == modalModes.EditMode">
<input id="other" maxlength="50" formControlName="other" type="text" class="form-control" (keydown)="otherValue($event)" tabindex="0">
<div *ngIf="modalForm.controls.other.invalid && modalForm.controls.other.touched" class="alert-danger">
<span class="mlcons_circled_information"><span class="path1"></span><span class="path2"></span></span> Other is required.
</div>
</div>
<div *ngIf="modalMode == modalModes.ViewMode " class="view-mode" >
{{originaleDataReport?.FrequencyOtherNote}}
</div>
</div>
</div>
<div class="form-group col-md-12 col-lg-12">
<div class="col-md-12 col-lg-12 px-0">
<div class="col-md-4 px-0 form-label">
<label for="report-type" class="label-Names- label-inline">Type of Report:</label>
</div>
<div class="col-md-8 px-0">
<div *ngIf="modalMode == modalModes.EditMode">
<select id="report-type" class="form-control" formControlName="typeOfReport" (change)="setTypeOfReport()" tabindex="0">
<option value="null">Please select</option>
<option *ngFor="let item of typeofReports" [value]="item.FieldValueKey">{{item.DisplayName}}</option>
</select>
</div>
<div *ngIf="modalMode == modalModes.ViewMode" class="view-mode" >
{{originaleDataReport?.typeofReportsName && originaleDataReport.typeofReportsName()}}
</div>
</div>
</div>
</div>
<div class="col-md-12 col-lg-12 " *ngIf="(this.originaleDataReport.typeofReportsName && this.originaleDataReport.typeofReportsName())=='Other' || typeReport=='Other'">
<br />
<div *ngIf="modalMode == modalModes.ViewMode " class="col-md-11 px-0 px-30-right">
<label class="label-Names- label-inline">Sample Report:</label>
<div *ngFor="let item of fileAttachment" class="file-list">
<div *ngIf="item?.Sample_Report?.FileName">
<a id="link-icon" href="#" (click)="$event.preventDefault(); downloadFile($event)">
<file-icon [fileExtension]="item?.Sample_Report?.FileExtension"></file-icon>
</a>
<span class="file-info">
<label class="label-Names- label-inline">
<a id="link" href="#" (click)="$event.preventDefault(); downloadFile($event)" class="a-link">
{{ item?.Sample_Report?.FileNameDisplay }}
</a>
</label>
</span> <b>({{ item?.Sample_Report?.FileSize/1024/1024 | number:'.2' }} MB)</b>
</div>
</div>
</div>
<div *ngIf="modalMode == modalModes.EditMode " class="col-md-12 col-lg-12 px-0 px-30-right ">
<label for="file-upload" class="label-Names-upload">Sample Report</label> <label class="max-size-limit-label">(Maximum file size is 20MB.)</label>
<div *ngFor="let item of fileAttachment;" class="added" tabindex="0">
<div *ngIf="item?.Sample_Report?.FileName && !isSetforRemoval">
<a id="link-icon" href="#" (click)="$event.preventDefault(); downloadFile($event)" class="pull-left" tabindex="-1">
<file-icon [fileExtension]="item?.Sample_Report?.FileExtension"></file-icon>
</a>
<span class="file-info pull-left">
<label class="label-Names- label-inline file-limit">
<a id="link" href="#" (click)="$event.preventDefault(); downloadFile($event)" class="a-link" tabindex="-1">
{{ item?.Sample_Report?.FileNameDisplay }}
</a>
</label>
</span> <b class="pull-left">({{ item?.Sample_Report?.FileSize/1024/1024 | number:'.2' }} MB)</b>
Remove
<i class="mlcons_filled_close pull-right" aria-hidden="true" tabindex="-1" (click)="setToRemoveSampleFile($event)"></i>
</div>
<div *ngIf="isSetforRemoval">
<span class="file-limit pull-left"><b> {{ item?.Sample_Report?.FileNameDisplay }} </b></span>
Keep File
<i class="mlcons_stroke_refresh pull-right" aria-hidden="true" (click)="KeepFileAttachment($event)"></i>
<span class="pull-left"> will be removed when you save.</span>
</div>
</div>
<br />
<div id="file-upload" ng2FileDrop
[class.file-over]="hasDropZoneOver"
(fileOver)="fileOver($event)"
[uploader]="uploader"
class="well drop-zone" *ngIf="fileEmpty == null">
<div class="form-group col-md-12 col-lg-12 ">
<div class="col-md-2 col-lg-2 px-0" *ngIf="uploadStatus == uploadStates.Ready && uploader.queue.length == 0">
<div class="change-icon" *ngIf="uploadStatus == uploadStates.Ready">
<span class="mlcons_stroke_add_doc">
<span class="path1"></span><span class="path2"></span><span class="path3"></span><span class="path4"></span><span class="path5"></span><span class="path6"></span><span class="path7"></span><span class="path8"></span><span class="path9"></span>
</span>
<span class="mlcons_stroke_upload_doc">
<span class="path1"></span><span class="path2"></span><span class="path3"></span><span class="path4"></span><span class="path5"></span><span class="path6"></span><span class="path7"></span><span class="path8"></span><span class="path9"></span>
</span>
</div>
<span *ngIf="uploadStatus == uploadStates.Failed" class="mlcons_stroke_failed_upload">
<span class="path1"></span><span class="path2"></span><span class="path3"></span><span class="path4"></span><span class="path5"></span><span class="path6"></span><span class="path7"></span><span class="path8"></span><span class="path9"></span>
</span>
<span *ngIf="uploadStatus == uploadStates.Uploading && (uploader.progress || 0) <= 99" class="mlcons_stroke_upload_doc">
<span class="path1"></span><span class="path2"></span><span class="path3"></span><span class="path4"></span><span class="path5"></span><span class="path6"></span><span class="path7"></span><span class="path8"></span><span class="path9"></span>
</span>
<span *ngIf="uploadStatus == uploadStates.Uploading && (uploader.progress || 0) > 99" class="mlcons_stroke_success_upload">
<span class="path1"></span><span class="path2"></span><span class="path3"></span><span class="path4"></span><span class="path5"></span><span class="path6"></span><span class="path7"></span><span class="path8"></span><span class="path9"></span>
</span>
</div>
<div class="col-md-7 col-lg-7 px-0 margin-top-10" *ngIf="uploadStatus == uploadStates.Ready && uploader.queue.length == 0">
<div class="align-left" *ngIf="uploadStatus == uploadStates.Ready">Upload a file to the project.</div>
<div *ngIf="uploadStatus == uploadStates.Ready"
class="second-message align-left">Drag and drop a<b> file </b>here or click Add File to browse.</div>
</div>
<div class="col-md-8 col-lg-8 px-0" *ngIf="(uploadStatus == uploadStates.Ready && uploader.queue.length > 0) || uploadStatus == uploadStates.Success || uploadStatus == uploadStates.Uploading || uploadStatus == uploadStates.Failed">
<div [class.failed]="uploadStatus == uploadStates.Failed"
[class.upload]="uploadStatus == uploadStates.Uploading"
class="file-info">
<file-icon [fileExtension]="fileExtension"></file-icon> <div>
{{fileInfo}}
<span *ngIf="uploadStatus == uploadStates.Success || uploadStatus == uploadStates.Uploading" class="mlcons_circled_check"><span class="path1"></span><span class="path2"></span></span>
<span *ngIf="(uploadStatus == uploadStates.Failed && !rename)" class="mlcons_circled_error"><span class="path1"></span><span class="path2"></span></span>
</div>
</div>
</div>
<div class="remove-file form-group col-md-4 col-lg-4 px-0" *ngIf="uploadStatus == uploadStates.Ready && uploader.queue.length > 0">
<div class="link-margin-right pull-right px-0" *ngIf="uploader.queue.length > 0">
<div class="remove-file">
<span class="mlcons_filled_close" (click)="$event.preventDefault(); remove()"></span> Remove
</div>
</div>
</div>
<div class="form-group col-md-4 col-lg-4 px-0 remove-file" *ngIf="uploadStatus == uploadStates.Uploading">
<div class="remove-file pull-right link-margin-right">
<span class="mlcons_filled_close"></span> Cancel
</div>
</div>
<div class="col-md-3 col-lg-3 add-file-btn" *ngIf="uploadStatus == uploadStates.Ready && uploader.queue.length == 0">
<input [hidden]="true" #file type="file" ng2FileSelect [uploader]="uploader" (change)="fileChangeEvent($event)" />
<button (click)="$event.preventDefault(); file.click()" class="btn btn-primary"><i class="mlcons_filled_add"> </i> Add File</button>
</div>
<div class="form-group col-md-12 col-lg-12 px-0">
<div class="padding-lr-15 file-progress">
<div class="progress upload-progress" *ngIf="uploadStatus == uploadStates.Uploading">
<div class="progress-bar" [class.failed]="uploadStatus == uploadStates.Failed" role="progressbar" [ngStyle]="{ 'width': uploader.progress + '%' }"></div>
</div>
</div>
<div *ngIf="uploadStatus == uploadStates.Uploading && uploader.progress > 0"
[class.failed]="uploadStatus == uploadStates.Failed"
[class.upload]="uploadStatus == uploadStates.Uploading"
class="file-info-progress padding-lr-15">
Uploading file <span>({{uploader.progress || 0}}%)</span>
</div>
<div *ngIf="fileExceeded" class="duplicate-file-name-error">
<span class="mlcons_circled_information"><span class="path1"></span><span class="path2"></span></span> {{fileName}} exceeds the maximum size limit of 20 MB.
</div>
<div *ngIf="errorOccured && uploadStatus == uploadStates.Failed" class="duplicate-file-name-error">
<span class="mlcons_circled_information"><span class="path1"></span><span class="path2"></span></span> Upload was unsuccessful. Please try again.
</div>
</div>
<div> </div>
</div>
</div>
</div>
</div>
<div class="form-group col-md-12 col-lg-12 ">
<div class="col-md-4 px-0-left form-label">
<label for="recipients" class="label-Names- label-inline">Recipients:</label>
</div>
<br />
<div class="form-group col-md-12 col-lg-12 px-0">
<textarea class="col-md-12 col-lg-12 px-2 textstyle" [readonly]="modalMode != modalModes.EditMode" maxlength="200" id="recipients" formControlName="recipients" (keydown)="recipientValue($event)" tabindex="0">{{originaleDataReport?.Recipient}} </textarea>
</div>
<div class="form-group col-md-12 px-0 px-25-pad-bottom">
<span class="col-md-12 border-bottom-1"></span>
<hr />
</div>
<div *ngIf="modalMode == modalModes.EditMode" class="form-group col-lg-12 px-0">
<button id="save-button" name="save-button" class="btn btn-primary" [disabled]="!isButtonEnable " type="submit" >Save Changes</button>
<button id="cancel-button" class="btn btn-default" type="submit" (keydown.Tab)="cancelButtonTab($event)" (click)="cancelClick($event)" tabindex="0">Cancel</button>
</div>
<div *ngIf="modalMode == modalModes.ViewMode" class="form-group col-lg-12 px-0 footer-action">
<span class="mlcons_filled_edit"></span> <a id="edit-data" class="a-link" (keydown.Tab)="$event.preventDefault" (keydown.enter)="onEditDataClicked($event)" (click)="onEditDataClicked($event)" >Edit eData Reporting</a>
</div>
</div>
</div>
</form>
</div>
</div>
I hope somebody could help me find the cause of this error. Thanks
It's perfectly normal that you get such errors in IE. It simply doesn't support all ES6 and then again you need to add some missing libraries in IE.
Go to src/polyfills.ts and replace its content with the following:
/** IE9, IE10 and IE11 requires all of the following polyfills. **/
import 'core-js/client/shim';
import 'core-js/es6/symbol';
import 'core-js/es6/object';
import 'core-js/es6/function';
import 'core-js/es6/parse-int';
import 'core-js/es6/parse-float';
import 'core-js/es6/number';
import 'core-js/es6/math';
import 'core-js/es6/string';
import 'core-js/es6/date';
import 'core-js/es6/array';
import 'core-js/es6/regexp';
import 'core-js/es6/map';
import 'core-js/es6/weak-map';
import 'core-js/es6/set';
/** IE10 and IE11 requires the following for NgClass support on SVG elements */
import 'classlist.js'; // Run `npm install --save classlist.js`.
/** Evergreen browsers require these. **/
import 'core-js/es6/reflect';
import 'core-js/es7/reflect';
/**
* Required to support Web Animations `#angular/animation`.
* Needed for: All but Chrome, Firefox and Opera. http://caniuse.com/#feat=web-animation
**/
import 'web-animations-js'; // Run `npm install --save web-animations-js`.
* Zone JS is required by Angular itself.
*/
import 'zone.js/dist/zone'; // Included with Angular CLI.
Run the following commands:
npm install --save classlist.js
npm install --save web-animations-js