Lightning component forceChatter examples

In this blog I am going to show how to use salesforce forceChatter:** components and how its use them to create your own components show the feed. A forceChatter: feed component represents a feed that’s specified by its type. Use the type attribute to display a specific feed type. The strategy used to find items associated with the subject. Valid values include Bookmarks, Company, DirectMessages, Feeds, Files, Filter, Groups, Home, Moderation, Mute, News, PendingReview, Record, Streams, To, Topics, UserProfile.

For example, set type=” groups” to display the feed from all groups the context user either owns or is a member of.

<aura:component implements="force:appHostable">
    <forceChatter:feed type="groups"/>

You can also display a feed depending on the type selected. This example provides a drop-down menu that controls the type of feed to display

<aura:component implements="force:appHostable">
    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
    <aura:attribute name="options" type="List" />
    <aura:attribute name="type" type="String" default="News" description="The type of feed" access="GLOBAL"/>
    <aura:attribute name="types" type="String[]"
                    description="A list of feed types"/>
    <h1>My Feeds</h1>
    <lightning:select aura:id="typeSelect" onchange="{!c.onChangeType}" label="Type" name="typeSelect">
        <aura:iteration items="{!v.options}" var="item">
            <option text="{!item.label}" value="{!item.value}" selected="{!item.selected}"/>
    <div aura:id="feedContainer" class="feed-container">
        <forceChatter:feed />
    // Handle component initialization
    doInit : function(component, event, helper) {
        var type = component.get("v.type");
        var types = component.get("v.types");
        var opts = new Array();
        // Set the feed types on the lightning:select component
        for (var i = 0; i < types.length; i++) {
            opts.push({label: types[i], value: types[i], selected: types[i] === type});
        component.set("v.options", opts);
    onChangeType : function(component, event, helper) {
        var typeSelect = component.find("typeSelect");
        var type = typeSelect.get("v.value");
        component.set("v.type", type);
        // Dynamically create the feed with the specified type
        $A.createComponent("forceChatter:feed", {"type": type}, function(feed) {
            var feedContainer = component.find("feedContainer");
            feedContainer.set("v.body", feed);

Here is the app

<aura:application extends="force:slds">