salesforce lightning components view data not getting refreshed

Question

I have built a simple component to display the contact information. But, its not showing in the page. no clue what is going on ?

I have checked apex controller is returning contact correctly. But, the component is not rendering with the received contact object.

<aura:application >
    <aura:attribute name="contactId" type="String"/>

    <c:PreferenceComponent contactId="{!v.contactId}"/>
</aura:application>

<aura:component controller="PreferenceComponentCtrlr">
    <aura:attribute name="contactId" type="String"/>

    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>

    <lightning:card variant="Narrow" title="{!v.contact.Name}" 
                    iconName="standard:contact">
        <p class="slds-p-horizontal_small">
            {!v.contact.Phone}
        </p>
        <p class="slds-p-horizontal_small">
            {!v.contact.MailingStreet}
        </p>
    </lightning:card>    
</aura:component>

({
    doInit : function(component, event, helper) {
        var action = component.get("c.getContact");
        action.setParams({
            contactId : component.get("v.contactId")
        });

        action.setCallback(this, function(response) {
            var state = response.getState();
            if (state === 'SUCCESS'){
                component.set("v.contact", response.getReturnValue());
            }
        });

        $A.enqueueAction(action);                           
    }
})

public class PreferenceComponentCtrlr {

    @AuraEnabled
    public static Contact getContact(Id contactId) {
        System.debug('contactId - ' + contactId);
        return [Select Id, Name, Phone, MailingStreet From Contact Where Id =: contactId LIMIT 1];
    }
}

Answer 1

I found the answer, i need to add Contact attribute to the component,

<aura:attribute name="contact" type="Contact"/>