DEV Community: Salah Hasanin

Answer: angular mat-checkbox dynamically with ngModel

Salah Hasanin — Thu, 14 Oct 2021 09:12:35 +0000

answer re: angular mat-checkbox dynamically with ngModel

Mar 21 '18

Add [checked]="unit.checked" and remove ngModel, id and name from your mat-checkbox. This does one way binding when you load the page but to make the two way binding work you need to do something similar like this which i have done in my project:

Pass the $event on…

Open Full Answer

Answer: Assigning array inside object in Javascript

Salah Hasanin — Tue, 17 Aug 2021 12:39:25 +0000

answer re: Assigning array inside object in Javascript

Jun 20 '18

From MDN

Object.assign() copies property values. If the source value is a reference to an object, it only copies that reference value.

And as products[0] is an object in your data that's why you are facing this shallow copy issue

Instead you can use

let p = JSON.parse(JSON.stringify(products[0]));

…

Open Full Answer

Answer: Network Response Time Out Error (create-react-native-app) (expo)

Salah Hasanin — Mon, 26 Apr 2021 05:08:37 +0000

answer re: Network Response Time Out Error (create-react-native-app) (expo)

Jun 24 '19

I wasted my whole day searching for answer and finally i got solution accidentally. Just change connection from LAN to tunnel

Below is the image,

Open Full Answer

Answer: Navigation triggered outside Angular zone, did you forget to call 'ngZone.run()'?

Salah Hasanin — Thu, 01 Apr 2021 12:18:35 +0000

Oct 7 '20

My issue fixed by wrapping the router navigation command in ngZone. Please check the code below

in constructor add "private zone: NgZone".

private zone: NgZone

this.zone.run(() => {
                    this.router.navigate(['/login']);
                });

Open Full Answer

Answer: CSS technique for a horizontal line with words in the middle

Salah Hasanin — Sun, 03 Jan 2021 13:22:21 +0000

answer re: CSS technique for a horizontal line with words in the middle

Jun 20 '17

Here is Flex based solution.

h1 {
  display: flex;
  flex-direction: row;
}
h1:before, h1:after{
  content: "";
  flex: 1 1;
  border-bottom: 1px solid #000;
  margin: auto;
}
h1:before {
  margin-right: 10px
}
h1:after {
  margin-left: 10px
}

<h1>Today</h1>

JSFiddle: https://jsfiddle.net/yoshiokatsuneo/3h1fmj29/

Open Full Answer

Answer: Experimental support for decorators is a feature that is subject to change in a future release

Salah Hasanin — Mon, 30 Nov 2020 10:17:19 +0000

answer re: Experimental support for decorators is a feature that is subject to change in a future release

Sep 16 '20

In Visual Studio code go to File -> Preferences -> Settings and check Experimental Decorators

Open Full Answer

Answer: How to highlight selected mat-list-item with color in angular?

Salah Hasanin — Fri, 09 Oct 2020 01:14:21 +0000

Sep 20 '18

Since you're using routerLink already, you should take advantage of routerLinkActive

html:

<mat-list>
   <mat-list-item style="cursor: pointer" routerLink="/base/dashboard" [routerLinkActive]="['is-active']">Dashboard</mat-list-item>
   <mat-list-item style="cursor: pointer" routerLink="/base/notification" [routerLinkActive]="['is-active']">Notification</mat-list-item>
   <mat-list-item style="cursor: pointer" routerLink="/base/comments" [routerLinkActive]="['is-active']">Comments</mat-list-item>
</mat-list>

css:

.is-active {
    background-color: red;
}

Open Full Answer

Answer: ng test throws error on angular material components

Salah Hasanin — Tue, 22 Sep 2020 02:06:27 +0000

answer re: ng test throws error on angular material components

Aug 2 '20

In Angular component tests, if your component has dependencies, you need to either mock them or import them. With Material components, this means importing the modules for any components used in the tested component when configuring the testing module. For example:

beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [ DeleteBotModalComponent ]
      imports:

…

Open Full Answer

Answer: Sequelize Unknown column '*.createdAt' in 'field list'

Salah Hasanin — Fri, 04 Sep 2020 01:04:33 +0000

answer re: Sequelize Unknown column '*.createdAt' in 'field list'

Dec 5 '13

209

I think the error is that you have timestamps enabled in sequelize, but your actual table definitions in the DB do not contain a timestamp column.

When you do user.find it will just do SELECT user.*, which only takes the columns you actually have. But when you join, each…

Open Full Answer

Answer: Sliding border from right to left using CSS

Salah Hasanin — Sun, 30 Aug 2020 16:05:14 +0000

answer re: Sliding border from right to left using CSS

Jul 2 '15

You can position your :after element to the right

#header {
  position: relative;
}
#header a:after {
  content: '';
  display: block;
  border-bottom: 3px solid red;
  width: 0;
  position: absolute;
  right: 0;
  -webkit-transition: 1s ease;
  transition: 1s ease;
}

#header a:hover:after { 
  width: 100%; 
}

Open Full Answer

Answer: Angular - How to fix 'property does not exist on type' error?

Salah Hasanin — Mon, 24 Aug 2020 23:16:58 +0000

answer re: Angular - How to fix 'property does not exist on type' error?

Apr 17 '18

It usually happens when you develop Angular applications. To solve this just shut down the server & start it again:

$ ng serve

Explanation

This happens because when you start the application, The server is actually serving the bundles(JavaScript/CSS/HTML... output files) stored in the dist folder. Sometimes, when you make…

Open Full Answer

Answer: Insert query in nodejs

Salah Hasanin — Mon, 24 Aug 2020 13:15:43 +0000

answer re: Insert query in nodejs

Jun 30 '16

Try this as your sql emit the Fname1 and Passwor1 as variables;

 app.post('/insert',function (req,res){
         var Fname1=req.body.fname;
        var Passwor1=req.body.pwd;
        var sql= "insert into test(Fname,Passwor) values ('"+Fname1+"',  '"+Passwor1+"')";
        con.query(sql,function(err,rows){
                if(err) throw err;
                res.send("Value has been inserted");
        })
    })

Open Full Answer