I'm getting following error in my new Angular 11 app. Could not found any syntax errors.
core.js:6156 ERROR DOMException: Failed to execute 'setAttribute' on 'Element': 'ng-reflect-Dev Portal' is not a valid attribute name.
at EmulatedEncapsulationDomRenderer2.setAttribute (http://localhost:8080/admin/vendor.js:62217:16)
at setNgReflectProperty (http://localhost:8080/admin/vendor.js:38053:26)
at setNgReflectProperties (http://localhost:8080/admin/vendor.js:38078:13)
at elementPropertyInternal (http://localhost:8080/admin/vendor.js:38001:13)
at Module.ɵɵproperty (http://localhost:8080/admin/vendor.js:42749:9)
at DevMainHeaderComponent_Template (http://localhost:8080/admin/app-layout-layout-module.js:394:65)
at executeTemplate (http://localhost:8080/admin/vendor.js:37594:9)
at refreshView (http://localhost:8080/admin/vendor.js:37463:13)
My html template as follows,
<div class="row main-header-container">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-8 col-xl-8 offset-lg-2 offset-xl-2">
<div class="row">
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-2 col-xl-2" [ngClass]="(isLoggedInUser === true)?'offset-lg-3 offset-xl-3':'offset-lg-9 offset-xl-9'">
<select class="form-control">
<option>English</option>
<option>Finish</option>
</select>
</div>
</div>
</div>
</div>
TS File as follows,
export class DevMainHeaderComponent implements OnInit {
public isLoggedInUser = true;
}
If I removed ngClass directive it works, but I cant find any issue with ngClass syntax here, even I tried hardcoded like this [ngClass]="['first']", still getting same error.
This console error is not throwing with ng serve and working fine, only in prod it happens.
If your are using a condition to determine a class you should use a different syntax like so:
[ngClass]="{'first': true, 'second': true, 'third': false}"
Example:
[ngClass]="{'checked': rating > 0}"
https://angular.io/api/common/NgClass
I'm building my project with maven, my project name is <name>Dev Portal</name>. It contains a space. This project name is adding as attribute. And attribute cannot contains space.
<!--bindings={
"ng-reflect-Dev Portal": "true"
}-->
Removing space from name resolved the problem<name>DevPortal</name>
With Angular 9 this behavior was not there.
Related
I created an overlay in a project based on the example :
https://material.angular.io/cdk/overlay/
In my component Html :
<div class="row justify-content-center">
<div class="col-8">
Some Infos here
<button type="button" (click)="isOpen = !isOpen" cdkOverlayOrigin #originOverlay="cdkOverlayOrigin" class="btn btn-success"><fa-icon icon="check"></fa-icon><span>Buy</span></button>
</div>
</div>
<ng-template cdkConnectedOverlay [cdkConnectedOverlayOrigin]="originOverlay" [cdkConnectedOverlayOpen]="isOpen">
<div>This is my tooltip</div>
</ng-template>
Then i added the line isOpen = false; in my component.ts and the import in my global app.module : OverlayModule
On the button code line, I have this error showing up :
No directive found with exportAs 'cdkOverlayOrigin'
I have replicated your same code in stackblitz and it seems to work fine for me. You must have forgotten one of the packages. #angular/material also needs #angular/cdk for this to work.
You can check that the code is working here.
Link to stackblitz
I'm developing an app using Laravel as backend and Angular as frontend. To login and register I'm trying to use JWT but when I try to register using the register form I get the following error: "ERROR TypeError: Cannot read property 'name' of undefined".
register.component.html
<form #registerForm=ngForm (ngSubmit)="onSubmit()">
<div class="form-group row mx-auto">
<label for="inputName3" class="col-md-6 col-form-label">Name</label>
<div class="col-md-12">
<input type="text" name="name" class="form-control"
placeholder="Name" [(ngModel)]="form.name" required>
<div class="alert alert-danger mt-2" [hidden]="!error.name">
<i class="fa fa-times-circle"></i> {{error.name}}
</div>
</div>
</div>
...
</form>
register.component.js
export class RegisterComponent implements OnInit {
public form = {
name: null,
email: null,
password: null,
password_confirmation: null
};
constructor(private http: HttpClient) { }
onSubmit(){
return this.http.post('http://localhost/api/auth/register',
this.form).subscribe(
data => console.log(data),
error => this.handleError(error)
);
}
ngOnInit() {
}
}
In the template, your test [hidden]='!error.name' is not valid because the variable error is not defined in the controller (.ts).
You should define error property with type object in the component.
because Angular expects an object called error with name key.
If you wait error from the backend or you need a quick solution just put ? (question mark) after error word in HTML like: [hidden]='!error?.name'.
This will make Angular check for error variable before checking for name property.
Actually I am using pagination in web page,i am putting one condition ng-if="id !== 0" if this code is true then it will hide some portion if its false its showing that portion.My problem is if condition is false then it showing that portion but pagination is not working when i am clicking on next its not going to the word.but if i am using the same condition in ng-show its working fine pagination is also working.Please help me whats going on there i am unable to understand.
Here is my code..
<div class="orphan-navigation col-md-12" ng-show="totalOrphans !== 0">
<div class="col-md-2 pull-left orphan-count">
{{id}} / {{totalOrphans}}
</div>
<div class="navigation-button-container pull-right">
<uib-pagination total-items="totalOrphans" ng-model="id" max-size="limitPages" ng-change="orphanChanged()" items-per-page="1">
</uib-pagination>
</div>
</div>
<div class="col-md-12 orphan-text-label" ng-show="totalOrphans !== 0">
<div class="col-sm-3 label label-default pull-left orphan-key">Un-Annotated word</div>
<div class="col-xs-4 small-left-margin label orphan-key searchText">{{orphanData.orphan.attributes.text}}</div>
</div>
in above code i have used ng-show="totalOrphans !== 0" for ng-show my pagination is working fine when i am clicking in next button its highlighting other words.thats i want result.
but if i used ng-if instead of ng-show my pagination is not working,its not highlighting next word when i am clicking on next.
here i am attaching image of my web page.
if someone has still not understand my question please comment here ,i will try to clarify you thanks in advance,
ng-if will create it's own scope. Also uib-pagination creates it's own scope and probably use its parent scope to create your pagination. Now if the ng-if has it's own scope uib-pagination can't use the scope paramater from you controller.
For this reason there is the ControllerAs Syntax.
To use it you need to define it in ng-controller like: ng-controller="AppCtrl as vm".
Inside your controller you need to define 'vm' with 'this':
app.controller('AppCtrl', [function() {
var vm = this
vm.id = 5;
}]);
Now you can use the id inside the HTML like this:
<div ng-controller="AppCtrl as vm">
<span>{{vm.id}}</span>
</div>
As an example your code with ng-if that you provided need to look like this:
<div class="orphan-navigation col-md-12" ng-if="vm.totalOrphans !== 0">
<div class="col-md-2 pull-left orphan-count">
{{vm.id}} / {{vm.totalOrphans}}
</div>
<div class="navigation-button-container pull-right">
<uib-pagination total-items="vm.totalOrphans" ng-model="vm.id" max-size="vm.limitPages" ng-change="vm.orphanChanged()" items-per-page="1">
</uib-pagination>
</div>
</div>
<div class="col-md-12 orphan-text-label" ng-if="vm.totalOrphans !== 0">
<div class="col-sm-3 label label-default pull-left orphan-key">Un-Annotated word</div>
<div class="col-xs-4 small-left-margin label orphan-key searchText">{{vm.orphanData.orphan.attributes.text}}</div>
</div>
I have this html page where i havce included 4 templates and menu for each is given as tabs on top.
I want to change the width of tab(div) in col-sm- 4 to lets say col-sm-6 when an http.get() method returns true i.e success
here is the html menu code..
<div class="row">
<div class="col-sm-3 bg-success" ng-click="go('/AddBook')">
<h2>Add a Book</h2>
</div>
<div class="col-sm-3 bg-info" ng-click="go('/SearchBook')">
<h2>Search a Book</h2>
</div>
<div class="col-sm-3 bg-success"
ng-click="getAllBooks(); go('/ViewAllBooks')">
<h2>View All Books</h2>
</div>
<div class="col-sm-3 bg-info" ng-click="go('/RequestBook')">
<h2>Request a Book</h2>
</div>
</div>
Here is the snapshot of the html page ....
now when an http.get() method succeeds , i want to change the width of searchbook, request book and view all books to change..
Read the $http documentation at https://docs.angularjs.org/api/ng/service/$http#get
In [config] you can pass success and error functions.
Much like this:
get(url,
function(data){
$scope.getSuccessful = true;
},
function(errorData){
$scope.getSuccessful = false;
}
);
After the call, success/error should be called. Then set the value of the class in html.
<div class="{{getSuccessful ? 'col-md-2' : 'col-md-10'}}" ng-click="go('/RequestBook')">
<h2>Request a Book</h2>
</div>
Hi you can try something like.
ng-class="{ 'col-md-6' : expression }"
Check the docs for this https://docs.angularjs.org/api/ng/directive/ngClass
Put promises on http.get() and on success assign a true value to a scoped variable and then in the Ui use ng-class as stated by adeel_s
<div>
{{vis}}
<div class="dsui-visuals-section" data-ng-show="vis"></div>
<div class="text-center col-sm-12" style="margin-top:200px" data-ng-show="!vis">404 NOT FOUND</div>
</div>
This is my template which is getting vis variable from a controller, based on that value I am showing two child div's presented.
But before getting vis variable 404 NOT FOUND template is loading.How to avoid this? Can anyone help to resolve this.
initialise the scope variable with a true value and use data-ng-hide="vis" instead of data-ng-show="!vis"
<div>
{{vis}}
<div class="dsui-visuals-section" data-ng-show="vis"></div>
<div class="text-center col-sm-12" style="margin-top:200px" data-ng-hide="vis">404 NOT FOUND</div>
</div>
and in the controller set the default value
$scope.vis=true;