angular/material2 is just out in beta.0 with a new site.
But I cant find out if it has a responsiv grid system for layout, like bootstrap.
in app.module.ts:
import { FlexLayoutModule } from '#angular/flex-layout';
#NgModule({
import:[
FlexLayoutModule
])}
then follow the handbook below to learn how to use it in your HTML:
https://github.com/angular/flex-layout
https://tburleson-layouts-demos.firebaseapp.com/#/docs
You Can Use this Package |ng2-flex-layout|
And flex-Layout
Yes, Angular/Material2 does have grid layout: material grid layout
You can refer to this answer about creating your own Angular Grid System from scratch.
Related
Existing questions on this subject refer to how to use Angular with FontAwesome Icons and the Answer is ideally Angular FontAwesome. I searched both repo's and didn't really find much using angular-fontawesome. There are hints of older solutions only.
So I have that. I am also using Angular Material Buttons, to which I have been tasked with using FontAwesome Icons in my Buttons and this leads me to Material Icons
I am not really sure where to begin.
Providing I have added an Icon to angular-fontawesome as described. I have a Button with a Icon ready to go, there is a standard method to use to connect the two?
TLDR: I want to use a Material Icon Button, but I am unable to use a Material Icon and have to use FontAwesome Icons instead. I don't know how to achieve this.
Approach 1: Material icon registry
Material allows to use custom SVG icons with its components (like mat-button). FontAwesome icons are also SVGs, so you can use this mechanism to solve task at hand.
// 1. Import desired FontAwesome icon
import { faFontAwesomeFlag } from '#fortawesome/free-brands-svg-icons';
import { icon } from '#fortawesome/fontawesome-svg-core';
// 4. Use with `mat-icon` component in your template
#Component({ template: '<button mat-button type="button"><mat-icon svgIcon="font-awesome" style="vertical-align: top"></mat-icon>Make Awesome!</button>' })
export class AppComponent {
constructor(registry: MatIconRegistry, sanitizer: DomSanitizer) {
// 2. Render icon into SVG string
const svg = icon(faFontAwesomeFlag).html.join('');
// 3. Register custom SVG icon in `MatIconRegistry`
registry.addSvgIconLiteral(
'font-awesome',
sanitizer.bypassSecurityTrustHtml(svg)
);
}
}
Also check this issue for description of a more lightweight implementation.
Approach 2: Use fa-icon component from angular-fontawesome library
As you already seem to use #fortawesome/angular-fontawesome package in your application, you can avoid using mat-icon altogether and use fa-icon inside mat-button instead.
import { faFontAwesomeFlag } from '#fortawesome/free-brands-svg-icons';
#Component({ template: '<button mat-button type="button"><fa-icon [icon]="faFontAwesomeFlag" style="padding-right: 6px"></fa-icon>Make Awesome!</button>' })
export class AppComponent {
faFontAwesomeFlag = faFontAwesomeFlag;
}
Note that you'll also need to add FontAwesomeModule to imports for this to work. See documentation for more details.
Here is the demo with both described approaches: https://stackblitz.com/edit/components-issue-8znrc5
Note that I also had to add some CSS to ensure that icon is aligned well with the button text.
Go to your project directory and run this command to install google material icons pack
npm add material-design-icons.
Next, update the “.angular-cli.json” file to include the web font into the “index.html” page when application gets compiled:
{
styles: [
"./assets/fonts/material-icons/material-icons.css"
]
}
Finally, you can test the font by updating the main application template with something like the following:
<h1>Material Icons</h1>
<i class="material-icons">account_circle</i>
<i class="material-icons">thumb_up</i>
You can refer to this site . I followed all the steps fro this site to use mat-icons when I was creating angular 6 project.
More
You can also checkout this stackblitz
Update
If you want to use font awesome icons I suggest you can start by following this guide . It's super easy and simple to use.
Install font-awesome dependency using the command npm install --save font-awesome angular-font-awesome.
After that import the module :
import { AngularFontAwesomeModule } from 'angular-font-awesome';
#NgModule({
//...
imports: [
//...
AngularFontAwesomeModule
],
//...
})
export class AppModule { }
I'm newbie to Angular 2. What are the corresponding events from AngularJS to Angular 2?
eg: ng-click to (click)
How about ng-init and all others events? I'm not having intellisense in VS .NET, so it's hard to guess.
Any help please!
Thanks
The default handled events should be mapped from the original HTML DOM component's events:
http://www.w3schools.com/jsref/dom_obj_event.asp
by just removing the on prefix.
onclick ---> (click)
onkeypress ---> (keypress)
etc...
You can also create your custom events.
However ngInit is not an HTML event, this is part of the Angular's Component lifecycle, and in Angular 2 they are handled using "hooks", which are basically specific method names inside your component that will be called whenever the component enters the specific cycle. Like:
ngOnInit
ngOnDestroy
etc...
Here is the list of events in Angular
Please check in the documentation if required for more info
(focus)="myMethod()"
(blur)="myMethod()"
(submit)="myMethod()"
(scroll)="myMethod()"
(cut)="myMethod()"
(copy)="myMethod()"
(paste)="myMethod()"
(keydown)="myMethod()"
(keypress)="myMethod()"
(keyup)="myMethod()"
(mouseenter)="myMethod()"
(mousedown)="myMethod()"
(mouseup)="myMethod()"
(click)="myMethod()"
(dblclick)="myMethod()"
(drag)="myMethod()"
(dragover)="myMethod()"
(drop)="myMethod()"
This is one of the big advantages of Angular2. Not every event needs a customized ng-xxx directive anymore.
With custom elements and all other libraries producing all kinds of custom events, this approach doesn't fly.
In Angular2 the (eventName)="expression" binding syntax allows to subscribe to any known and unknown event.
The $event variable is still available (eventName)="myEventHandler($event)"
See also https://angular.io/docs/ts/latest/guide/template-syntax.html#!#event-binding
A great place to begin to understand Angular 2 is the official Web Page.
Here you can see all the angular2/common ng-XXX although now it is as follows ngXxxx
In my case the best way to understand the differences between Angular 1 and Angular 2 was doing the tutorials:
Tour of Heroes
The Developer Guide: this is a practical guide to Angular for experienced programmers who are building client applications in HTML and JavaScript.
You can use the following syntax to handle events (for example click like ng-click with Angular1):
<button (click)="callSomeMethodOfTheComponent()">Click</button>
The difference here is that this is more generic. I mean you can use DOM events directly but also custom ones defined using the EventEmitter class.
Here is a sample that describes how to handle a click event and a custom event (my-event) trigged by a sub component:
#Component({
selector: 'my-selector',
template: `
<div>
<button (click)="callSomeMethodOfTheComponent()">Click</button>
<sub-component (my-event)="callSomeMethodOfTheComponent()"></sub-component>
</div>
`,
directives: [SubComponent]
})
export class MyComponent {
callSomeMethodOfTheComponent() {
console.log('callSomeMethodOfTheComponent called');
}
}
#Component({
selector: 'sub-component',
template: `
<div>
<button (click)="myEvent.emit()">Click (from sub component)</button>
</div>
`
})
export class SubComponent {
#Output()
myEvent: EventEmitter;
constructor() {
this.myEvent = new EventEmitter();
}
}
Hope it helps you,
Thierry
I'm new to ember.js and looking at the built-in views: http://emberjs.com/guides/views/built-in-views/
I understand working with views using a data-template name and editing it from Ember.view.extend, but how do I modify these ember.js built in views? And how do view names work?
For example, in my index.html:
<script type="text/x-handlebars" id="test">
<h3>Title</h3>
<p>{{view Ember.TextField valueBinding='title'}}</p>
<h3>Body</h3>
<p>{{view Ember.TextArea viewName="bodyArea" valueBinding='text'}}</p>
<h2>Output</h2>
{{title}}
{{text}}
</script>
Now how might I set the background color of the textarea with the viewName="bodyArea" in my app.js? In the ember.js guide linked to above they show that you can set a viewName property in handlebars but don't show how you might edit it in javascript....
I think you have three questions here:
How do I set a background color on the text area? {{view Ember.TextArea viewName="bodyArea" valueBinding='text' classNames="my-class-name'}} and then use CSS to style "my-class-name".
How do I modify a view with custom behavior?
App.MyTextArea = Em.TextArea.extend({
didInsertElement: function(){
//do something cool here.
}
});
In template:
{{view App.MyTextArea}}
How do I use view name? I'm not sure that is something that is used a lot, but if you define a container view you could access a child view with this.get('myViewName'). As things are more encapsulated within ember a lot of the old uses for viewName no longer seem relevant. Someone else might be able to chime in on this feature.
As an aside you can also use a new short hand for built in views:
{{textarea value=title}} will do the same as {{view Ember.TextField valueBinding='title'}}
I cannot find out how to select element inside CKEditor by class using jQuery selector, so any help is appreciated.
CKEDITOR.instances.editor1.window.getFrame().$ retrieves a native DOM element for editor editable area. So:
$( CKEDITOR.instances.editor1.window.getFrame().$ ).contents().find( anything );
Should solve your problem.
Also note that CKEditor provides an API for DOM manipulation:
CKEDITOR.instances.editor1.document.getById( 'someId' );
CKEDITOR.instances.editor1.document.getElementsByTag( 'div' );
This one worked for me:
$(youreditor.document.find('anything'))
where youreditor is
youreditor = CKEDITOR.replace( '' ... etc
If you using jQuery Adapter (tested on 4.4.3 version)
$( $('.your_selector').ckeditor().editor.window.getFrame().$).contents().find('a.super_link')
I'm using devExpress 11.1 with MVC 3/razor and i'm experiencing problems with putting html tags into the content of the tabs of the pageControl e.g. I would like to put <div id="someDiv"></div> into the content.
Did anyone encounter similar problems?
At present, you can follow recommendation from the "Using in Razor Views" topic and wait a little when the "Razor Demos" will be available.
ViewContext.Writer.Write() is used to write html tags inside contents. Just go through this example.
settings.SetContent(() =>
{
ViewContext.Writer.Write("<div class=accountHeader>");
ViewContext.Writer.Write("<h2>");
ViewContext.Writer.Write("Welcome to My Site");
ViewContext.Writer.Write("</h2>");
ViewContext.Writer.Write("</p>");
ViewContext.Writer.Write("</div>");
});