The fifth edition of JavaScript framework (Angular 5) brings numerous innovations and optimizations. It’s a TypeScript based open-source front-end web application platform. Key improvements in Angular 5 include support for progressive web apps, improvements related to material design, and build optimizer. Angular 5 combines declarative templates, end-to-end tooling, dependency injection, and integrated best practices to solve development challenges. It empowers the developers to build the applications that live on the web, mobile or desktop.

Here are some strong points of Angular 5.

Development across platforms

You can reuse your code and abilities to build apps for any development target, be it web, mobile, native or desktop.

Incredible tooling

The framework allows you to build features quickly with simple, decorative template whose language can be extended with your own components. You can also receive immediate Angular-specific help for nearly every IDE and editor.

Speed and performance

Achieve maximum speed currently possible, and take it further with server-side rendering. Angular 5 puts you in control over scalability as you can meet huge data requirements by building data models on Immutable.js, RxJS or other push-model.

What is new introduced in Angular 5?

Here are some new features of Angular 5 that are noticeable improvements over its earlier version, Angular 4.

• Includes the build optimizer for product builds created with Angular CLI.
• Watch Mode to only compile the necessary components of the code.
• Server side rendering of Angular applications.
• AOT component optimized for pure speed.
• Brings on changes with pipes to allow developers create custom pipes.

The breaking changes of Angular 5

• Opaque Token has been replaced by Injection Token.
• The parameter constructor of the ErrorHandler has been removed.
• For the parameter InitialNavigation, the Angular Router takes values only as “enabled” or “disabled”. True, false, legacy_enabled, legacy_disabled values are no longer accepted.
• In favor of the new @angular/common/http module, the angular/http had been marked as depreciated.
• The compiler no longer uses the enableLegacyTemplate by default, instead <ng-template> should be used.

Key features of Angular share buttons

Here are some of the key features of Angular 5 share buttons:

• Multiple high quality share buttons to boost traffic
• Official share counts
• Style integration
• Lightweight
• Massively customizable
• Google Analytics integration

Setting custom options

To apply custom option on all share button components across your app, pass your coding in the root module where the library is imported.

Available options are:

• Include
• Exclude
• Theme
• Description
• Title
• Tags
• Image
• TwitterAccount
• GaTracking
• WindowHeight
• WindowWidth
• Size
• AutoSetMeta
• MoreButtonIcon
• LessButtonIcon

In today’s hyper connected world, our applications rely heavily on how the audiences interact and use the content contained within them. People expect to be able to do more than just passively consuming the content.

Why social media sharing matters

Nowhere is this truer than with the rise of social media in the recent years. With the ability to share content in the form of text, images, videos and embedded data, user expectations have also risen. Retaining the audience and getting them freely market the products and services on social media is very much the part of whole development planning cycle and marketing strategy of an Angular JS development company.

With Angular 5, adding the ability to share content across different social media platforms is incredibly simple. The functionality is useful in promoting the products and services to a wider audience across multiple platforms. As a side benefit, it allows the users to perform free, informal, ad-hoc marketing on your behalf.

Below are the two approaches to implementing social sharing buttons in Angular applications:

• USING NG2-SOCIAL-SHARE

Install using npm
npm install –save ng2-social-share
Import in app.module.ts or whichever module you want to include the sharing functionality.
import { CeiboShare } from ‘ng2-social-share’;
Include in the declarations of the @NgModule in app.module.ts
@NgModule({
bootstrap: [ AppComponent ],
declarations: [
AppComponent,
CeiboShare
],
imports: [ // import Angular's modules
BrowserModule,
],
})
In the component.ts file, you need to use declare and provide value for the variables. This is how Facebook provides the URL to be shared:

public repoUrl:string;

this.repoUrl=”http://www.rd.com/health/diet-weight-loss/speed-up-metabolism”;//urle shared

In the component.html, include the image or button to handle the sharing functionality. Look at the below code for Facebook:

<img src=”../../assets/img/Facebook.png” ceiboShare  =”{u: repoUrl}”>

With similar approach, you can implement social sharing button in other social networking sites also like LinkedIn, Pinterest, Google+, Instagram, etc.

• USING NGX-SHAREBUTTONS

Install using npm

npm install ngx-sharebuttons –save
Add ShareButtonsModule to NgModule imports array
import {ShareButtonsModule} from “ngx-sharebuttons”;
@NgModule({
imports: [
ShareButtonsModule.forRoot()
]
})

Include in your template as below:

<share-buttons [url]=”linkToShare”></share-buttons>
Check https://github.com/MurhafSousli/ngx-sharebuttons/wiki for other details of customization.

This approach adds the share buttons along with the functionality.

Certain websites allow social networking sites to fetch more than just the standard page title and image. This is achieved using special meta tags in the HTML head. The Open Graph Protocol will look something like this:

<head>
<meta property=”og:title” content=”My Page” />
<meta property=”og:description” content=”A Brief Description of My Page.” />
<meta property=”og:image” content=”http://www.mysite.com/images/my_beautiful_face.jpg” />
<!– etc. –>
</head>

When you share a URL on social networking sites, a crawler is dispatched to that URL that will scrape the page’s HTML, looking at the special meta tags and regular HTML elements such as the tags and images it might be able to use. The solution to this lies in using some kind of server-side user-agent detection to pick up whenever a social media crawler arrives, and then instead of showing it the plain Angular JS template file, redirect it to a server-generated page that contains the desired meta tags with correct information.

Server-Side Rendering

• To implement the SEO with single page application server-side rendering is done.
• The data which is read by the search engine bots is directly served by the server side using Node.
• Use Angular’s Meta Service to dynamically place meta tags.
• Every time the Route changes in the application, Angular’s Meta service is updated with server side data with appropriate tag used for social sharing.
• To remove caching of images, buttons are hidden until the meta service is updated, they are created in dom after updated tag.
• Short URL for Twitter is passed when Twitter window opens and updates URL with the short URL.

Why you need to add social share buttons now

Social share buttons are effective in enhancing social proof. Social sharing is very much akin to the word-of-mouth advertising. Showing the potential customers how many other people have bought and recommended a product or service helps in building trust in the purchase. Search engines now include the Strength of a link in social media as an algorithmic ranking factor. Strength is measured by the number of times a content is shared, tweeted, liked and posted on social media. So, if a content is shared frequently, it will help improve its ranking on search engine result pages for the relevant keywords. Social sharing buttons make it easier for the readers to pass along your content to their network. Without them, you are surely missing out on a huge opportunity.