The goal is to ensure you have a properly compiled QTDIR. In your case one for VS and one for gcc (if you want the two).
Depending on what you downloaded Qt Creator uses gcc but you can specify alternative QT directories under Options > Qt4 > Qt Versions. The path and version will show in the dialog box.
Go to the VS command line and run configure.exe & nmake with a clean source repository. Then add this QTDIR to you Qt Creator. I suggest you run make clean before.
Then make sure qmake and nmake can be run from the Qt command-line without errors. You should have a Qt Command line icon installed if you used Qt installer. If not, make sure you have QTDIR environment variable set, with %QTDIR%/bin in the path.
Do step 1 again, but this time do not use VS but make sure gcc is in the path. Run configure.exe etc again but in a separate directory specially for gcc. Add this version to your Qt Creator.
When compiling your project, run qmake first. You can change Qt versions, but do not forget to run qmake.
Hope this helps.
A @Component requires a view whereas a @Directive does not.
Directives
I liken a @Directive to an Angular 1.0 directive with the option restrict: 'A' (Directives aren't limited to attribute usage.) Directives add behaviour to an existing DOM element or an existing component instance. One example use case for a directive would be to log a click on an element.
import {Directive} from '@angular/core';
@Directive({
selector: "[logOnClick]",
hostListeners: {
'click': 'onClick()',
},
})
class LogOnClick {
constructor() {}
onClick() { console.log('Element clicked!'); }
}
Which would be used like so:
<button logOnClick>I log when clicked!</button>
Components
A component, rather than adding/modifying behaviour, actually creates its own view (hierarchy of DOM elements) with attached behaviour. An example use case for this might be a contact card component:
import {Component, View} from '@angular/core';
@Component({
selector: 'contact-card',
template: `
<div>
<h1>{{name}}</h1>
<p>{{city}}</p>
</div>
`
})
class ContactCard {
@Input() name: string
@Input() city: string
constructor() {}
}
Which would be used like so:
<contact-card [name]="'foo'" [city]="'bar'"></contact-card>
ContactCard is a reusable UI component that we could use anywhere in our application, even within other components. These basically make up the UI building blocks of our applications.
In summary
Write a component when you want to create a reusable set of DOM elements of UI with custom behaviour. Write a directive when you want to write reusable behaviour to supplement existing DOM elements.
Sources:
Best Answer
You can make use of
Angular CDK'sFocusMonitor serviceto disable.cdk-focusedand.cdk-program-focusedclasses by calling the service'sstopMonitoring()method.The documentation for this & the API can be found in the following links respectively:
1) FocusMonitor documentation &
2) FocusMonitor API
My
sidenavhad 4 buttons created using *ngFor. Each of these buttons was also arouterLink. Only the button whose router link was active should have primary background color.Now, this was getting confusing if, say, the routerLink associated with my 4th button was active as the 4th button would have the
primary background colorand the 1st button hadfocused stylingbecause of.cdk-focusedand.cdk-program-focusedclasses applied by theFocusMonitoron the button.You can take a look at the documentations for tailoring this to your need.